使用jQuery更改背景不透明度

Question

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

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

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

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

你不能改变的背景图像的透明度。

用户可以：

• 使用带有alpha通道
• 设置整个元件
• 使用带有内置在不透明度（这种图像格式的不透明度指定了背景颜色作为PNG）

一种方法是重构您的内容，使背景图像e是一个元素，它是一个包含你的内容的元素的兄弟，绝对定位它们中的一个或两个，然后改变前者的不透明度。这引入了将一切设置到所需高度的挑战。

Answer 3

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