Изменение непрозрачности фона с помощью 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

Вы не можете изменить непрозрачность фонового изображения.

Вы можете:

• Используйте фон цвет указан с альфа-каналом
• Установите непрозрачность всего элемента
• используют формат изображения со встроенным в непрозрачности (например как PNG)

Один из подходов заключается в реструктуризации вашего контента, e находится на элементе, который является родственным элементом, содержащим ваше содержимое, абсолютно позиционируя один или оба из них, а затем изменяя непрозрачность первого. Это вводит задачу установки всего на желаемую высоту.

Answer 3

Мое предложение к вам будет использовать программное обеспечение для редактирования изображений (например, как PhotoShop), чтобы изменить непрозрачность на фоновых изображениях. Затем сохраните эти изображения в другом файле и в своем CSS, измените фон: url() на менее непрозрачные изображения.