Як затемнити фон за допомогою CSS?


100

У мене є елемент із текстом. Кожного разу, коли я зменшую непрозорість, я зменшую непрозорість ЦІЛОГО тіла. Чи є спосіб, яким я можу просто зробити background-imageтемніший, а не все інше?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

Відповіді:


196

Просто додайте цей код до вашого css зображення

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

Довідково: лінійний градієнт () - CSS | MDN

ОНОВЛЕННЯ: Не всі браузери підтримують RGBa, тому у вас повинен бути "запасний колір". Цей колір буде , швидше за все , буде твердий (повністю непрозорий) наприклад: background:rgb(96, 96, 96). Зверніться до цього блогу щодо підтримки браузера RGBa.


Були з цим проблеми із переглядачем?
Jon

9
яка властивість, якщо ми хочемо вказати окремо фонове зображення і це?
Петруза

2
@Petruza, здається, у нас немає іншого вибору, крім як використовувати цей синтаксис. Прочитайте посилання : "Оскільки <gradient> s належать до типу даних <image>, їх можна використовувати лише там, де можна використовувати <image> s. З цієї причини linear-gradient () не працюватиме на background-color та інші властивості, що використовують тип даних <color> "
Марко Панічі

18

Використовуйте: після елемента psuedo:

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

Перевірте мою ручку>

http://codepen.io/craigocurtis/pen/KzXYad


Хороший, але не працює у Firefox 47.0.1 на Windows 10. Але працює з IE. Чи є у вас виправлення для Firefox?
Джон Макс

2
@JohnMax Firefox зараз працює нормально. Просто потрібно почекати кілька років.
Крейг О. Кертіс,

10

Установка background-blend-modeдля darkenбуде найпряміший і короткий шлях до досягнення мети , однак ви повинні встановити background-colorперший в режим накладення на роботу.
Це також найкращий спосіб, якщо пізніше вам доведеться маніпулювати значеннями у javascript.

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

Чи можу я використовувати для суміші фону


1
edge або IE11 насправді не є браузером
stackdave

6

Можливо, це можна зробити за допомогою box-shadow

однак я не можу змусити його фактично застосувати до зображення. Тільки на одноколірному фоні

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}
Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>


2

Ви можете використовувати контейнер для вашого фону, розміщений як абсолютний і від’ємний z-індекс: http://jsfiddle.net/2YW7g/

HTML

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

CSS

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}

2

Просто щоб додати до того, що вже тут, скористайтеся наступним:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... для крос-браузерної підтримки 70% накладеного лінійного градієнта. Щоб скрасити зображення, ви можете змінити всі ці 0,0,0на 255,255,255. Якщо 70% - це трохи більше, змініть .7. І, для подальшого використання, ознайомтеся з цим: http://www.colorzilla.com/gradient-editor/


1

коли ви хочете отримати яскравість або темніший колір фону, ви можете використовувати цей css-код

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

Дякую, я не знав про css- фільтри . Якщо комусь це допомагає, ось статус Can I Use (березень, 2020).
Рід Данкл,

0

Для мене підхід фільтра / градієнта не спрацював (можливо, через існуючий CSS), тому я використав :beforeзамість цього трюк псевдо стилю:

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}

Оскільки за замовчуванням displayдля ::before, inlineвін не приймає widthі height.
Connexo

Дякую @connexo, схоже, я пропустив це при копіюванні відповідних стилів.
Даніель Соколовський
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.