Opacity tylko na głównego diva

Question

Witam,

Chciałbym wykonać skrypt, w którym tylko div "categories", w którym znajdują się inne divy miał klasę opacity, a divy się w nim znajdujące nie. Oto skrypt:

.categories
{
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	text-align: center;
	padding: 0;
	margin-top: 60px;
	background-color: #ffffff;
	border-radius: 20px;
	opacity: 0.6;
}

h1
{
	font-size: 44px;
	font-weight: 400;
	color: #39a5f1;
	margin-bottom: 20px;
	opacity: 1;
	z-index: 1000;
}

.circle1
{
	width: 250px;
	height: 250px;
	background-color: #85ba37;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 1;
}

.circle2
{
	width: 250px;
	height: 250px;
	background-color: #c43542;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 1;
}

.circle3
{
	width: 250px;
	height: 250px;
	background-color: #cc5626;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 1;
}

.circle4
{
	width: 250px;
	height: 250px;
	background-color: #22a33e;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 1;
}

.circle5
{
	width: 250px;
	height: 250px;
	background-color: #b73b07;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 1;
}

.circle6
{
	width: 250px;
	height: 250px;
	background-color: #b8c613;
	margin: 33px;
	float: left;
	border-radius: 100%;
	opacity: 100%;
}

 

Answer 1

 

Może tak?

.categories

{

    margin-left: auto;

    margin-right: auto;

    width: 950px;

    text-align: center;

    padding: 0;

    margin-top: 60px;

  //to kasujesz

    border-radius: 20px;

   background-color: rgba(255, 255, 255, 0.6);

}

Comments

Działa, dziękuję bardzo za pomoc 

Answer 2

Nie nazwał bym styli CSS skryptem.

Musisz użyć koloru z parametrem alpha.

.class { background-color: rgba(255,255,255,.6); }

Jeśli tekst też ma być przezroczysty, to też nadaj mu kolor w rgba.

Jest jeszcze druga opcja. Możesz pozostawić tego diva bez styli, ew. nadać mu padding/margin, i dać mu aftera, który będzie miał ustawione opacity.

Answer 3

Można użyć pseudo klasy :after lub  :before i dla tej klasy ustawić opacity. Zwracam Ci uwagę, że z-index nie da się ustawić dla elementów pozycjonowanych statycznie; opacity: 100%; też nie zadziała. Twój pojemnik categories ma taka wysokość jak h1 ponieważ nie wyczyściłeś float-left; (clear: both)