Przyciemniane samego obrazka

Question

Jak przyciemnić sam obrazek? Gdy robię filter brightness to przyciemnia się obrazek wraz z całą zwartością (tekstem, przyciskami)

    background-image: url(obrazek);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    text-align: center;
    height: 1332px;
    

 

Comments

np. zastosuj odpowiednio spozycjonowany :before i backgroundem rgba(0,0,0,.5)

---

w  jaki sposób? jak masz wyglądać kod?

Answer 1

Można nałożyć kolejną warstwę div z tłem rgba, lub za pomocą pseudoelementu :after, :before tło rgba

Comments

jak miałby wygladać kod? bo nie za bardzo rozumiem :/

Answer 2

body{ 
	background:grey;
	margin:0;
	padding:0;
}

#temp { 
	background-image: url('imageimg.png');
	background-repeat: no-repeat;
	background-size: cover;
	height: 50px;
}

.container { 
	position:absolute;
	top:0;
	z-index:50;
	color:red;
}

.random_text { 
	margin-left:100px;
}

#abs { 
	margin-left:50px;
	margin-top:20px;
}

#temp:hover, .container:hover + #temp { 
	filter:brightness(50%);
}	

<div style="position:relative;margin-top:20px;">

	<div class="container">
		<button id="abs">Hello</button>
		<span class="random_text">Lorem Ipsum</span>
	</div>
	
	<div id="temp"></div>

</div>

 

Comments

można pv?

---

można pv?

 Jeśli możesz, to pisz tutaj na forum, a nie do mnie na "private".

Poprawiłbyś to gdybym wysłał kod?

Zależy od tego jak bardzo jest rozbudowany.

---

Napisałem, nie jest to bardzo rozbudowany kod

---

Czy tylko nav ma być przyciemniony filtrem?

---

znaczy ten nav też ma być, ale oprócz tego nava to jeszcze sam obrazek

https://i.imgur.com/HVi1a8u.jpg

---

obrazek i nav przyciemniony, reszta bez zmian

---

Czyli przyciemnione ma być tło nav'a i jeszcze ten obrazek, który jest tłem strony?

---

dokładnie

---

@focused,

Jeżeli nie będziesz manipulował tym tłem to nałuż warstwę w programie graficznym. Odchudzisz obrazek

---

tylko że to ma być w css zrobione

---

@Chess I jak?

---

body{ 
	margin:0;
}
.content {
    background-image: url('https://i.imgur.com/HVi1a8u.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    height:100%;
}
.nav { 
	width:100vw;
	height:19px;
	text-align:center;
}
.container, .container2 { 
	position:absolute;
	top:0;
	z-index:50;
	color:green;
}
.container:hover + .content, .container2:hover + div {
	filter:brightness(50%);
}

<div style="position:relative;margin-top:0px;">
	<div class="container">
	
		<div style="position:relative;margin-top:0px;">
			<div class="container2">	
				<nav class="nav">
					MENU
					OUR STORY
					Eudora
					OFFER
					CONTACT
				</nav>	
			</div>
			<div style="background:orange;height:19px;width:100vw"></div>
		</div>
		
	</div>
	<div class="content"></div>
</div>

Resztę sam wystylizuj, czyli pozmieniaj nazwy klas, a style inline wrzuć w arkusz stylów, itp.. Style, które są takie same i się powtarzają powinny być raczej napisane jako klasa pod tą samą nazwą.

---

Filter nie wspierane przez IE.

Może lepiej jednak hsla

<div class="baner">
  <div class="nav">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
  <div class="header"><h1>Super moce dla kazdego!!!</h1></div>
</div>
<div class="content">
  <h2>Content</h2>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam asperiores nemo saepe nesciunt, eos sequi ut voluptas necessitatibus voluptates dicta debitis nisi, non voluptatum ullam sed at! Voluptate, impedit deleniti.
  Nobis at adipisci sequi temporibus ipsa, laboriosam itaque. Deserunt fuga ipsum totam? Quaerat, at sint dolor molestias, aliquam numquam voluptate minus architecto nobis similique ullam libero facilis, iure nam commodi.
  Autem ratione modi, maxime cupiditate ex consequuntur amet quibusdam ullam officia ad pariatur quod sapiente omnis ea dicta. Esse, obcaecati. Asperiores eligendi aliquid alias quaerat ipsum repellendus quia quidem temporibus!
  Minima, doloribus vel repellat placeat sed, rerum optio animi, cum quidem consectetur quam vitae ea culpa voluptates quas! Optio vel magni ipsa neque modi eveniet commodi accusantium, dignissimos suscipit laboriosam.
  Commodi neque deserunt, consequatur dolores veniam, odit nobis cumque quisquam odio error necessitatibus ea ut harum non eum tempora temporibus? Esse saepe fugit sed qui quae illum enim delectus nostrum?
  Perferendis, aliquam? Minima perferendis tempore facere beatae delectus numquam, optio placeat, illo tempora itaque esse ea saepe ipsum impedit explicabo, recusandae quibusdam officiis cupiditate necessitatibus quaerat in architecto quod soluta?
  Nostrum cum itaque qui nulla corporis, perspiciatis dolor recusandae exercitationem fugit sapiente eaque minima temporibus impedit molestias odit reprehenderit, dolores optio rem. Nesciunt laudantium aut esse eos similique eaque culpa?
  Suscipit consequuntur eos nisi? Saepe delectus unde eos omnis fugiat porro iure fugit ut molestiae quam eum et, dolore sequi error aperiam, deserunt, laboriosam explicabo totam aliquid. Aut, sit repellendus?
  Cumque magni assumenda est velit nemo dolores, perferendis repellendus sunt nobis odit architecto eligendi tenetur eum non eaque debitis ipsa error iste at nostrum quas mollitia? Maxime adipisci aliquam molestiae!
  Blanditiis id vitae possimus, quod labore fugit voluptatum consequatur cupiditate qui ad at aut consectetur autem eveniet quibusdam architecto debitis dolor cumque ex! Ab praesentium asperiores aperiam mollitia modi soluta.
</div>

body{
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
}
.nav{
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 50px;
  background-color: hsla(0, 0%, 0%,.5);
  color: #fff;
}
.nav ul{
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.nav ul li{
  display: inline-block;
  width: 20%;
  font-size: 1.4em;
}
.baner{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background: url(http://icdn.2cda.pl/vid/oryginalne/2765b0aa8bc29af5adcb4e2317ffcbfe-141.jpg) center top no-repeat ;
  background-size: cover;
}
.baner::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: hsla(0, 0%, 0%,.6)
}
.header{
  position: absolute;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  z-index: 2;
  border: 1px solid;
  text-transform: uppercase;
}
.content{
  padding: 2em;
}

 

Answer 3

Najprościej nałożyć dwie warstwy. Ta na górze będzie przezroczysta, ta na dole to sam obrazek przyciemniony.

Answer 4

Możesz wykorzystać właściwość background-blend-mode. Można się tym trochę pobawić: https://jsfiddle.net/tqnxvf9L/

Comments

Wsparcie przeglądarek gorsze niż filter()