代码之家 › 专栏 › 技术社区 › TJ1

更改圆的背景图像

background-image flexbox css html

TJ1 · 技术社区 · 7 年前

我试图画一些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中删除背景图像。我该怎么做?

2 回复 | 直到 7 年前

Temani Afif 7 年前

一个简单的解决方案是将peudo元素转换为元素,并使用背景图像作为内联样式,以便可以轻松更改每个元素的图像,并应用与伪元素相同的所有属性:

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

Asons Oliver Joseph Ash 7 年前

只需在要从父对象继承的伪对象上设置背景图像,将父对象上的大小设置为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>