полупрозрачный эффект части веб-страницы

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

HTML:

<body> 
    <div class="front"> 
     <p>Hello World</p> 
    </div> 
</body>

CSS:

.front{ 
    background-color:silver; 
    height:200px; 
    width:200px; 
}

Ширина & высота div 200px, 200px.I хочу, чтобы область, покрываемая элементом div, была полупрозрачной, т.е. показывая фон размытия, но текст, который содержит div, также должен быть ясным. Как мне это сделать?

источник

2015-12-23 Anurag

Вам нужен rgba фон:

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

Цвета могут быть определены в красно-зелено-сине-альфа модели (RGBA) с использованием RGBA() функциональное обозначение. RGBa расширяет цветную модель RGB до , включая альфа-канал, что позволяет определить непрозрачность цвета . непрозрачность средства: 0 = прозрачный; 1 = непрозрачный;

источник

2015-12-23 08:57:40 HerrSerker

должен действительно иметь резервную копию rgb в случае, если браузер не поддерживается rgba –

Да, и резерв для людей, у которых нет браузера. ;) – HerrSerker

попробовать этот CSS:

.front{ 
    background-color:silver; 
    height:200px; 
    width:200px; 
    opacity: 0.4; 
}

Увеличение или уменьшение непрозрачности по вашему выбору.

источник

2015-12-23 09:01:01

Вы можете просто добавить opacity: 0.5; в свой класс css.

источник

2015-12-23 09:01:26 Philipp

вы можете использовать прозрачность для фона изображения и использовать before Selector оставаться непрозрачность текста:

так:

.front { 
 
    z-index: 1; 
 
} 
 
.front:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    opacity: 0.4; 
 
    filter: alpha(opacity=40); 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.font > p { 
 
    z-index: -1; 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
}

<div class="front"> 
 
    <p>Hello World</p> 
 
</div>

JSFIDDLE DEMO

источник

2015-12-23 09:02:23

Использование непрозрачности в CSS является самым простым способом.

источник

2015-12-23 09:06:38

Ну, мало из коробки, вы можете действительно blur ваше изображение, если вы попробуете немного разную наценку.

Вот он идет

.front{ 
 
    background-color:silver; 
 
    height:200px; 
 
    width:200px; 
 
    -webkit-filter: blur(3px); 
 
    -moz-filter: blur(3px); 
 
    -o-filter: blur(3px); 
 
    -ms-filter: blur(3px); 
 
    filter: blur(3px); 
 
    z-index:0; 
 
} 
 
.back{ 
 
    position: absolute; 
 
    top: 0; 
 
}

<body> 
 
    <div class="front"></div> 
 
    <div class="back"> 
 
    <p>Hello World</p> 
 
    </div> 
 
</body>

источник

2015-12-23 09:07:29

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

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

, но это не поддерживается в IE.

Таким образом, вы можете создать прозрачное фоновое изображение, созданное и примененное с использованием свойства background-image.

источник

2015-12-23 09:10:09 Rovi

полупрозрачный эффект части веб-страницы

ответ

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