更改圆形的背景图片

Question

我正在尝试绘制一些CSS生成的圆形，这些圆形具有图像作为背景。在我的当前代码中，背景图像被设置为CSS代码中的固定图像。

.container {
  text-align: center;
}

.circle {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 10px;
}

.circle:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("http://deepchains.com/images/team.png") center / cover no-repeat;
  opacity: .25;
  transition: .25s;
}

.circle:hover:after {
  opacity: 1;
  color: transparent;
}

.circle:hover {
  color: transparent;
}

.ccont {
  display: inline-block;
  margin: 10px;
}

.ccont:hover {
  color: transparent;
}

<div class="container">
  <a class="circle" href="http://www.url1.html">
    <div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
  </a>
  <a class="circle" href="http://www.url2.html">
    <div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
  </a>
</div>

这是我在Chrome浏览器中看到的示例结果：

我的问题是如何在HTML代码中分别更改每个圆的背景图像？我会有很多这些圆，我希望它们排列整齐并在同一行中，并且我想在HTML代码中设置它们的背景图像并从CSS中删除背景图像。我该怎么做？

- TJ1

---

如何从CSS中删除：选择CSS中的行并按删除键。然后在HTML输出中添加图像。我建议使用Flexbox来对齐文本和图像。 - cloned

为什么要从CSS中删除它们？除非你想让它们具有恒定的背景图像，否则可以使用内联样式。 - lolbas

@lolbas，你能展示一下代码吗？我想让它们每一个都有不同的背景图片。 - TJ1

@TJ1 看一下这里。基本上，你可以将CSS直接写入HTML标签的style属性中。 - lolbas

Answer 1

一个简单的解决方案是将您的伪元素转换为元素，并使用background-image作为内联样式，这样您就可以轻松地为每个元素更改图像，并应用与伪元素相同的所有属性。

.container {
  text-align: center;
}

.circle {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 10px;
}

.circle .image {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: .25;
  transition: .25s;
}

.circle:hover .image {
  opacity: 1;
  color: transparent;
}

.circle:hover .ccont{
  color: transparent;
}

.ccont {
  display: inline-block;
  margin: 10px;
}

<div class="container">
  <a class="circle" href="http://www.url1.html">
   <span class="image" style="background-image: url(http://lorempixel.com/400/300/)"></span> 
    <div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
  </a>
  <a class="circle" href="http://www.url2.html">
  <span class="image" style="background-image:url(https://lorempixel.com/400/200/)"></span>
    <div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
  </a>
</div>

- Temani Afif

---

@TJ1 我也在使用 Chrome。你确定你都应用了修改，包括所有的 CSS/HTML？你是在代码片段里看到这个问题还是在你的网站上？ - Temani Afif

是的，我复制了您所有的修改、CSS和HTML。这里的代码片段按预期运行，也就是说，如果鼠标在圆形的任何部分上，文本就会消失。但是在我的网站上，只有当鼠标在文本上时，文本才会消失。 - TJ1

@TJ1你能给我展示一下这个网站吗？也许是另一个CSS在冲突。 - Temani Afif

实际上，它正在我的本地计算机上运行，尚未上传到互联网。 - TJ1

尝试添加以下内容：.circle:hover .ccont { color: transparent; } - Temani Afif

Answer 2

只需在伪元素中设置从父元素继承的背景图像，将父元素的大小设置为0以在那里隐藏它，最后，在标记中设置style="background-image: url(...)"。

更新

您甚至可以删除内部的div并仍然实现相同的效果

堆栈段

.container {
  text-align: center;
}

.circle {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  margin: 10px;
  background-size: 0;              /*  hide image by set its size to 0  */
}

.circle:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;       /*  inherit from parent  */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .25;
  transition: .25s;
}

.circle:hover:after {
  opacity: 1;
}

.circle:hover {
  color: transparent;
}

<div class="container">
  <a class="circle" href="http://www.url1.html" style="background-image: url(https://picsum.photos/300/300?image=1070);">
    This is <br>Text1
  </a>
  <a class="circle" href="http://www.url2.html"  style="background-image: url(https://picsum.photos/300/300?image=1072);">
    This is <br>Text2
  </a>
</div>

- Asons