Question

如何在将鼠标悬停在带文字的div上时更改背景图像的不透明度？我试图添加不透明度来悬停，但它也影响了文本，所以我认为它只能使用jQuery来完成，因为我无法改变HTML结构。

＆＃13;

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}
.border__flex {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideas__gallery div {
  margin: 10px;
}
.ideas__gallery__h4 {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  font-size: 22px;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
.one:hover .ideas__gallery__h4,
.two:hover .ideas__gallery__h4,
.three:hover .ideas__gallery__h4,
.four:hover .ideas__gallery__h4,
.five:hover .ideas__gallery__h4,
.six:hover .ideas__gallery__h4,
.seven:hover .ideas__gallery__h4 {
  color: #ff5b5d;
  transition: all 0.2s ease-in;
}
.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}
.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.two {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.three {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://www.pageresource.com/wallpapers/wallpaper/ford-mustang-shelby-gt-nice-cars.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.four {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.five {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.six {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.seven {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
@media screen and (max-width: 420px) {
  /* ------- Footer Media Queries 320px------- */
  .one,
  .two,
  .three,
  .four,
  .five,
  .six,
  .seven {
    float: none;
    width: 100%;
    height: 100px;
    text-decoration: none;
  }
}

＆＃13;

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3"> Title</h3>
    <a href="#">
      <div class="one border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="two border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="three border__flex">
        <h4 class="ideas__gallery__h4">Headline Four Nice Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="four border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
    <a href="#">
      <div class="five border__flex">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <a href="#">
      <div class="six border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
    <a href="#">
      <div class="seven border__flex">
        <h4 class="ideas__gallery__h4">One</h4>
      </div>
    </a>
  </div>
</div>

＆＃13;

Answer 1

你可以使用这样的技巧

将背景设置为:after

.one:after {
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  content: "";
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

源： https://css-tricks.com/snippets/css/transparent-background-images/

Answer 2

我的建议是使用图片编辑软件（如PhotoShop）来改变背景图像的不透明度。然后，将这些图像保存到另一个文件中并在CSS中，将background：url（）更改为不太透明的图像。

Answer 3

您无法更改背景图像的不透明度。

你可以：

使用通过Alpha通道指定的背景颜色
设置整个元素的不透明度
使用内置不透明度的图像格式（例如PNG）

一种方法是重构内容，使背景图像位于包含内容的元素的兄弟元素上，绝对定位其中一个或两个，然后更改前者的不透明度。这引入了将所有东西设置到所需高度的挑战。

使用jQuery更改背景不透明度

3 个答案: