如何在 Facebook 个人资料图片上显示透明的相机图标答案

【问题标题】：How to show transparent camera icon like on a facebook profile picture如何在 Facebook 个人资料图片上显示透明的相机图标
【发布时间】：2019-08-17 15:35:22
【问题描述】：

我正在尝试创建一个react app。这允许用户设置他们的个人资料图片。我想设置布局，以便当用户将鼠标悬停在个人资料图片上时，它会显示一个透明按钮，就像在 Facebook'` 个人资料图片中显示的那样。

这就是我所做的

 let cur_image = ''
        //if user has selected any image
        if (this.state.image) {
            //show image
            cur_image =
                <div>
                    <button style={{ backgroundColor: 'red', width: '50%' }}>
                        <img
                            src={this.state.image}
                            alt="Your Profile"
                            style={{ width: "150px", height: "150px" }}
                        />
                    </button>
                </div>
        } else {
            //show camera Icon
            cur_image = <IconButton component="span"><CameraAlt style={{ width: "150px", height: "150px" }} /></IconButton>
        }

我尝试过使用 CSS 属性（如高度和宽度）来做这件事，但我不知道在那之后该怎么做。我没有收到任何错误，但不知道我可以使用哪些属性以及为什么？

【问题讨论】：

请向我们展示您到目前为止所做的工作，以便我们为您提供帮助。
基本上我没有任何可以显示为代码的东西，因为除了高度和宽度属性我没有尝试过任何东西，因为我不知道应该使用哪些其他属性。我想要的只是一张图片，它有一个像 facebook 中的透明按钮

标签： javascript html reactjs

【解决方案1】：

给你，只是给一个方法如何继续它。

.background {
  width: 200px;
  height: 200px;
  position: relative;
  background: url("https://icon-library.net/images/avatar-icon-free/avatar-icon-free-10.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-layer {
  display: none;
  background: #80808069;
 }

.background:hover > .icon-layer {
    display: block;
}


img {
 width: 100%;
 height: 100%;
}

<div class="background">
  <div class="icon-layer">
    <img src="https://cdn4.iconfinder.com/data/icons/social-media-2-7/66/97-512.png"/>
   </div>
 </div>

【讨论】：