Сделать текст белым с полупрозрачным черным фоном при наложении на изображение - PullRequest
Новая
       36

Сделать текст белым с полупрозрачным черным фоном при наложении на изображение

2 голосов
/ 04 августа 2011

У меня простой вопрос по CSS / HTMl. У меня есть изображение и текст в div. Я поместил текст поверх изображения, используя z-index.

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

Проблема в том, что текст отображается серым, а не белым, потому что непрозрачность снижена. Как сделать текст белым, а вокруг него - полупрозрачный черный фон? 

 <style type="text/css">

        .wrap {
          position:relative;
          float:left;
          clear:none;
          overflow:hidden;
        }

        .wrap img {
          position:relative;
          z-index:1;
        }

        .wrap .desc {
          display:block;
      position:absolute;
      width:166px;
      top:20px;
      left:20px;
      z-index:2;
      color: #FFFFFF;
      padding: 10px;
      background-color: #000000;
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;

     /*For IE*/
      filter: alpha(opacity=60);
      opacity: 0.60;

        }
    </style>

    <div class="wrap">
        <img src="path/to/pic.png" />
        <h6 class="desc">This is my text about my image</h3>

    </div>

Есть предложения?

Ответы [ 4 ]

3 голосов
/ 04 августа 2011

Примерно так:

CSS 

.mod {
  position: relative;
  width: 80px;
  height: 100px;
  padding: 5px;
}
.mod-text,
.mod-background {
  position: absolute;
  left: 0;
  width: 100%;
}
.mod-text {
  color: #FFF;
  font-size: 1em;
  text-align: center;
  bottom: 0;
}
.mod-background {
  background-color: #f58322;
  border-radius: 8px;
  filter: alpha(opacity=60);
  opacity: 0.60;
  top: 0;
  height: 100%;
}

HTML 

<div class="mod">
  <img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
  <div class="mod-background">
    &nbsp;
  </div>
  <div class="mod-text">
    Hawt!
  </div>
</div>

Plnkr

http://plnkr.co/edit/aSd9rO?p=preview

2 голосов
/ 04 августа 2011

Я бы создал еще один div перед описанием с той же высотой и шириной, установил прозрачность этого div, добавил фон, затем поместил описание в другой div без фона.Если они оба имеют абсолютную позицию, то последняя должна идти поверх первой.

См. демо здесь.

2 голосов
/ 04 августа 2011

В зависимости от требований поддержки вашего браузера, вы можете избежать изменения непрозрачности до 100% и использовать rgba цвет: 

background-color: rgba(0,0,0,0.5);

Цвета: красный, зеленый, синий,(0-255 каждый), за которым следует Alpha (0-1.0).

Если вам нужен запасной вариант в старых браузерах, вы обычно можете использовать: 

background-color: #000;
background-color: rgba(0,0,0,0.5);

По умолчанию для Black используетсястарые браузеры и полупрозрачные для новых.Это позволяет избежать дополнительной загрузки (мозаичного изображения), а также сохранить большую часть вашего стиля в текстовом файле (проще для версии, обслуживания и поиска).

1 голос
/ 04 августа 2011

Вместо фона можно поместить полупрозрачное изображение на заднем плане элемента.Фактическое изображение может быть очень маленьким, и вы можете повторить его, чтобы охватить весь фон. 

.wrap .desc {
      display: block;
      position: absolute;
      width: 166px;
      top: 20px;
      left: 20px;
      z-index: 2;
      color: #FFFFFF;
      padding: 10px;
      background: url('my-small-bg.png');
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}

Вот пример того, как это может выглядеть: http://jsfiddle.net/f6XS6/1/

...