Question

我正在尝试创建一个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属性（例如height和width）来做到这一点，但是我不知道该怎么做。我没有收到任何错误，但不知道可以使用哪些属性，为什么？

Answer 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>

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

1 个答案: