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

Question

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

0

Когда я устанавливаю непрозрачность для моего основного класса div, это также делает текст и все остальное непрозрачностью. Я хочу, чтобы серый фон имел непрозрачность. Вот мой код:

<div class="main1">
content
</div>

CSS:

.main1
{
background-color:#333333;
border:2px solid #7C7C7C;
text-align:center;
width:1250px;
top:auto;
bottom:auto;
left:300px;
right:300px;
margin-left:auto;
margin-right:auto;
}

Когда это происходит, все становится непрозрачным. Любая помощь?

user3543243 17 апр. 2014, в 01:46

Источник

0

пожалуйста, загрузите полный код на скрипку.
ProllyGeek 16 апр. 2014, в 22:59

Теги:

class

html

css

opacity

5 ответов

Ещё вопросы

пожалуйста, загрузите полный код на скрипку.

Stephen Thomas · Answer 1 · 2014-04-16T20-18-00.000Z

Просто дайте цвет фона непрозрачности

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

Обратите внимание на совместимость браузера с этим методом: caniuse.com/css3-colors

Kyle R · Answer 2 · 2014-04-16T21-25-00.000Z

Установите цвет фона в rgba (r, g, b, opacity)

background-color: (51, 51, 51, 0.2).

Это поместит непрозрачность только на фоне, а не на весь div (включая ваш текст)

Вы можете использовать конвертер для преобразования шестнадцатеричных цветов в цвета rgb.

Jacques Koekemoer · Answer 3 · 2014-04-16T21-05-00.000Z

Сделайте 2 div внутри внутри того же размера, что и друг друга, и сделайте их над кругом, тогда вы сделаете div 1 с непрозрачностью, а div2 - содержимым. Я хотел бы приложить пример, но при использовании моего телефона

ProllyGeek · Answer 4 · 2014-04-16T20-49-00.000Z

background-color:rgba(51, 51, 51, 0.5)

в случае, если ваш BG будет цветом, вы можете использовать альфа-фильтр, который равен 0,5 в приведенном выше коде.

DivineChef · Answer 5 · 2014-04-16T20-33-00.000Z

Вам также нужно покрасить текст! Сначала, как и другие, используйте цвет фона CSS. Здесь полный код и скрипт JS

.main1
 {
 background-color:rgba(255,0,0,0.5);
 border:2px solid #7C7C7C;
 text-align:center;
 width:150px;
 top:auto;
 bottom:auto;
 left:300px;
 right:300px;
 margin-left:auto;
 margin-right:auto;
 color: black;

}

HTML

<div class="main1">
content
</div>