css 我如何使2 divs在对方

rhfm7lfc  于 2022-12-27  发布在  其他
关注(0)|答案(1)|浏览(114)

我怎样做一个像这样的div?https://i.gyazo.com/cc34cdba5d8ef4969212c45935caf165.png它有1个div,图像(汽车)和黑色的背景,背景上有文字。当你悬停时,红色会消失。这是我要做的一个完整的gyazo。https://i.gyazo.com/51d360e8f4a6408dbed789f0d702dbc7.png
这是这辆车的照片:您需要至少10代表张贴超过3个链接,链接应该在评论!

我所尝试的

创建1个名为black的div,如下所示:

<div class="black">
<img src="urltocar" height="x" width="x">
</div>

设计的黑色div变得比汽车本身更大,所以它得到了一个黑色的背景,但它从来没有工作。

aemubtdh

aemubtdh1#

给你:https://jsfiddle.net/s2moc0gt/1/
基本上只是一些CSS:

.img-container {
  width: 200px;
  height: 200px;
  background-image: url("https://rocket-league.com/content/media/items/avatar/220px/75e8bb7e5d1473412157.png");
  background-repeat: no-repeat;
  background-position: center;
}

.red-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, red);
}

.red-overlay:hover {
  opacity: 0;
}

相关问题