Как сделать фоновое изображение DIV пойти темнее при наведении курсора

У меня есть этот код:Как сделать фоновое изображение DIV пойти темнее при наведении курсора

<a style="text-decoration:none;" href="https://www.google.pt"> 
    <div class="xxxx"> 
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3> 
    </div> 
</a>

С помощью этого CSS класса:

.xxxx{ 
    text-align:center; 
    vertical-align:middle; 
    background-image:url(images/img.jpg); 
    max-width:100%; 
    width:400px; 
    height:300px; 
}

мой вопрос, что я должен сделать, чтобы сделать фон изображение div становится темнее, когда мышь закончилась, но только изображение, текст остается прежним.

источник

2016-03-30 Berna

Создайте более темную версию изображения и добавьте .xxxx: наведите курсор на свой CSS и установите более темное изображение в качестве фона. –

Вы можете использовать CSS фильтры:

-webkit-filter: brightness(0.222);

Подробнее о фильтрах https://davidwalsh.name/demo/css-filters.php

Надеется, что это помогает!

источник

2016-03-30 13:23:45 andrey

самый простой! – jackjop

Почему только префиксная версия? – str

Проблема заключается в том, что ответ содержит только решение safari-chrome. И, тем не менее, фильтры по-прежнему не имеют широкой совместимости, к сожалению, –

Вы можете сделать это с другим изображением

.xxxx:hover 
{ 
    background-image:url(images/img_darker.jpg); 
}

где img_darker темнее версия IMG вы используете.

РЕДАКТИРОВАТЬ:

a:hover .xxxx{ 
    background-image:url(images/img_darker.jpg); 
}

источник

2016-03-30 13:18:58 jackjop

Это не сработало, я не уверен, но, может быть, потому, что, когда я нахожусь на изображении, обхватывает ссылку, которую у меня есть перед делом, любая идея, как ее решить? – Berna

Это сработало, у меня была типограмма кода, но есть ли способ, чтобы вместо того, чтобы просто потемнело, сделать его похожим на угасание? Просто остаться красивее? – Berna

nope .. вы не можете этого достичь. но ответ андрея да, вы можете – jackjop

Я надеюсь, что это помогает

http://jsfiddle.net/audetwebdesign/8QMTv/

<button class="btn-img"> 
     <div class="img-wrap"> 
     <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" /> 
     </div> 
    </button>

.btn-img { 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    cursor: pointer; 
    background-color: white; 
    outline: 1px dotted blue; 
} 
.btn-img .img-wrap { 
    margin: 10px; 
} 

.btn-img img { 
    display: block; 
} 

.btn-img:hover .img-wrap { 
    background-color: black; 
} 

.btn-img:hover img { 
    opacity: 0.8; 
}

источник

2016-03-30 13:23:35 joeswebdevtips

Некоторые объяснения полезны и будут лучше отвечать. –

Вы можете использовать before преселектор и фильтр brightness

HTML

<a style="text-decoration:none;" href="https://www.google.pt"> 
    <div class="xxxx"> 
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3> 
    </div> 
</a>

CSS

.xxxx{ 
    text-align:center; 
    vertical-align:middle; 
    max-width:100%; 
    width:400px; 
    height:400px; 
    z-index:100; 
    position:relative; 
} 
.xxxx:before{ 
    position:absolute; 
    max-width:100%; 
    width:400px; 
    height:400px; 
    top:0; 
    left:0px; 
    content:" "; 
    background-image:url(https://images.blogthings.com/thecolorfulpatterntest/pattern-1.png); 
    z-index:1; 
} 
h3{ 
    z-index:100; 
    position:relative; 
}

.xxxx: парить: перед тем { фильтр: яркость (0.3); }

Example

источник

2016-03-30 13:27:49 LTasty

вы можете использовать:

линейный градиент
врезке тень
фон-смесь режима
фильтра, но забывает IE в это время

h1 { 
 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10); 
 
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10); 
 
} 
 
h1:hover { 
 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10); 
 
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10); 
 
} 
 
h2, 
 
h3, 
 
h4 { 
 
    background: url(http://lorempixel.com/100/100/abstract/10); 
 
} 
 
h2:hover { 
 
    box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.2); 
 
} 
 
h3 { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
h3:hover { 
 
    background-blend-mode: color; 
 
} 
 
h4:hover { 
 
    -webkit-filter: brightness(80%); 
 
    filter: brightness(80%) 
 
}

<h1>title</h1> 
 
<h2>title</h2> 
 
<h3>title</h3> 
 
<h4>title</h4>

codepen to play with

вы можете использовать gradinets, чтобы дать некоторые эффекты наведут фон http://codepen.io/gcyrillus/pen/rexVWR добавить/удалить градиенты, изменения цвета, изменить размер фона, на самом деле вы можете наложить любой узор поверх фонового изображения :)

источник

2016-03-30 13:29:50

это тоже хорошо, но если фоновое изображение имеет прозрачные части, это не должно преуспеть. Поправьте меня если я ошибаюсь. – jackjop

@jackjop попробуйте с первым, где цвет градиента обновляется только при наведении, но, да, он заполнит весь тег. это не было указано в вопросе :). В этом случае вам понадобится псевдо и фильтр, но IE останется в стороне. если у вас есть переводчик pucucide, я также могу установить демо :). я буду рядом в паре (пить кофе) –

yep, я просто упоминаю об этом. – jackjop

Проверьте это немного Fiddle Решает проблему.

Вы должны положить еще один div (в сером или черном) над пикутером, тогда кажется, что он становится темнее, когда он парит.

.yyyy{ 
position:absolute;opacity:0;width: 400px;height: 300px;background-color: #000000;} 
.yyyy:hover{ 
opacity: 0.3; 
}

источник

2016-03-30 13:49:50 sebi

Как сделать фоновое изображение DIV пойти темнее при наведении курсора

ответ

Смежные вопросы