Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2015, 12:02
Аспирант
Отправить личное сообщение для shurik_shink Посмотреть профиль Найти все сообщения от shurik_shink
 
Регистрация: 22.05.2015
Сообщений: 35

Вопрос по заданию прозрачности фонового рисунка
Я знаю про такой способ реализации прозрачности фонового рисунка
<style>
div.div1{background: url(img/main.jpg); opacity: 0.5;}
</style>
Недостатком является то что прозрачность задается не толко для фонового рисунка но также и для текста помещенного в элемент


Есть еще такой способ, но не для фонового рисунка, а для фонового цвета
<style>
div.div1{background: rgba(255,255,170,0.5); /*цвет и прозрачность фона*/}
</style>
В этом случае прозрачность касается только фонового цвета и не касается текста помещенного в элемент.


Вопрос:
Нельзя ли задать прозрачность фонового рисунка таким образом что бы прозрачность касалась только фонового рисунка и не касалась текста помещенного в элемент?
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2015, 12:21
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

сохранить картинку с прозрачностью не вариант?
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2015, 12:27
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

shurik_shink,
<style>
.wrap{
  position:relative;
  width:400px;
  height:122px;
}
.psevdoBg {
  position:absolute;
  left:0;top:0;margin:0;
  opacity:0.5;
}
div.cnt {
  position:relative;z-index:1;
  width:100%;
  height:100%;
  margin:0;
  font: normal normal 700 16px/normal "Times New Roman";
  color:#fff;
  background: rgba(255,0,17,0.25);
}
</style>
<div class="wrap">
  <img class="psevdoBg" src="http://www.optimum1.ru/images/shapka2.jpg" width=100%/>
  <div class="cnt">
<br>
     aadasdasdad<br>
     aadasdasdad<br>
     aadasdasdad<br>
     aadasdasdad<br>
  </div>
</div><br>
<div class="wrap">
  <img class="psevdoBg" src="http://www.optimum1.ru/images/shapka2.jpg" width=100%/>
  <div class="cnt" style="background: transparent;">
<br>
     aadasdasdad<br>
     aadasdasdad<br>
     aadasdasdad<br>
     aadasdasdad<br>
  </div>
</div><br>
Ну а тут истинный вид картинки <br>
<img src="http://www.optimum1.ru/images/shapka2.jpg" width=400/>

Последний раз редактировалось Deff, 21.12.2015 в 12:35.
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2015, 20:10
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Lemme, нет конечно, она тогда будет весить намного больше, так как png.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
вставка фонового рисунка Rudolf Общие вопросы Javascript 7 15.02.2009 19:03