Wstawienie tekstu na obrazek

pytanie zadane 5 marca 2019 w HTML i CSS przez mlodybuk Nowicjusz (170 p.)

Witam

Chciałbym zadać pytanie ta temat dodania tekstu na obrazek i przyciemnienia tła obrazka za tekstem.

Bardzo długo kombinowałem lecz nie udało mi się zrobić tego zadowalająco.

chodzi o wstawienie tekstu w tej oto ramce(wiem że może to źle być pokazane ale nie miałem innego pomysłu)

prosił bym o pomoc. tutaj kod:

CSS
.image
{	
	background-color: black;
}
 
.image img
{
    height: 100%;
    width: 100%;
	opacity: 0.8;
}
HTML
<article class="image">
	 
           <img src="liso.jpg"/>
	 
</article>

komentarz 5 marca 2019 przez niezalogowany

Nie lepiej użyć background-image?

komentarz 5 marca 2019 przez mlodybuk Nowicjusz (170 p.)

przy zmianie rozdzielczości użytkowniku zmieniało mi się położenie tekstu ,ponieważ jedynym sposobem jakim znałem to poprostu ustawić manualnie ten tekst od 0.

1 odpowiedź

odpowiedź 5 marca 2019 przez mb-dir Mądrala (6,710 p.)

Witam

Czy chcesz osiągnąć taki efekt? Jeżeli tak to napisz, wtedy przygotuję przykład wraz z komentarzami co, po co robię.

Pozdrawiam

komentarz 5 marca 2019 przez mlodybuk Nowicjusz (170 p.)
edycja 5 marca 2019 przez mlodybuk

Witam

O coś takiego mi chodzi

tekst na obrazku. tylko jak ten obrazek za tym tekstem pociemnić?

Btw witam ponownie ;-)

komentarz 5 marca 2019 przez mlodybuk Nowicjusz (170 p.)

zaraz podam poprawny kod

komentarz 5 marca 2019 przez mlodybuk Nowicjusz (170 p.)

@Michał Bysiewicz, Tutaj kod który mam:

<head>
     <meta charset="utf-8" />
     <title>Forest...Earth Dream</title>
     <meta name="description" content="Strona stworzona dla miłośników przyrody." />
     <meta name="keywords" content="Las, Przyroda, Dzikie zwierzęta, Bór." />
	 <meta http-quiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <link rel="stylesheet" href="main.css" />
	 <link rel="shortcut icon" href="scr/favicon.ico" />
	 
	 <!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
	
  </head>
  <body>
  <div id="back">
  
        <header>
	 
	       <h1 class="logo">Forset...Earth Dream</h1>   
		
		   <nav>
		
		      <ul class="menu">
		   
		         <li><a href="#">Strona Główna</a></li>
		         <li><a href="#">Za co powinniśmy kochać las?</a></li>
		         <li><a href="#">Co las znaczy dla ludzkości?</a></li>
			     <li><a href="#">Jak życ w zgodzie z naturą?</a></li>
		         <li><a href="#">O autorze</a></li>
		         <li><a href="#">Kontakt</a></li>
		   
		      </ul>
		
		   </nav>
	 
	    </header>
	    <article class="image">
	 
           <img src="liso.jpg"/>
	 
	    </article>
     </div>
  </body>
</html>

komentarz 5 marca 2019 przez mlodybuk Nowicjusz (170 p.)

i tutaj jeszcze:

body
{
	margin: 0;
	padding: 0;
}
#back
{
	width: 100%;
}
h1.logo
{
	margin: 0;
    background: url('piko.jpg') center top no-repeat;
	text-align: center;
	font-size: 80px;
    padding: 40px;
	color: #E2E2E6;
	text-shadow: black 0.1em 0.1em 0.2em;
}
nav
{
	background-color: #0D1910;
	text-align: center;
}
.menu
{
    list-style-type: none;
    margin: 0;
    padding: 10px;
    font-size: 20px;
    min-height: 38px;
    line-height: 200%;
}
.menu > li
{
	display: inline-block;
	padding-left: 15px;
	padding-right: 15px;
	border-right: 1px dashed #ffffff;
}
.menu > li:first-child
{
	border-left: 1px dashed #ffffff;
}
.menu a
{
	color: #fff;
	text-decoration: none;
}
.menu a:hover
{
	color: #315D3C;
}
.image
{	
	background-color: black;
}
 
.image img
{
    height: 100%;
    width: 100%;
	opacity: 0.8;
}

komentarz 5 marca 2019 przez mb-dir Mądrala (6,710 p.)

tylko jak ten obrazek za tym tekstem pociemnić?

https://codepen.io/hello-michal/pen/qvqXYV - obrazek musiałem wkleić jakiś randomowy z neta. Podejrzewam że znowu czegoś nie zrozumiałem - jednak zdanie zacytowane przeze mnie powyżej daje mi powód do tego aby przyciemnic obrazek za tekstem (jedyny tekst to logo). Napisz czy pomogłem, jeśli coś trzeba będzie poprawić spróbuje zająć się tym jutro

Pozdrawiam

komentarz 6 marca 2019 przez mlodybuk Nowicjusz (170 p.)

Przepraszam za to że wczoraj nie jaśnie wytłumaczyłem o co chodzi.

Już pokazuję:

z takiego czegoś:Powstało coś zbliżone do tego:Próbowałem już z postion: absolute; lecz przy zmianie rozdzielczości rozjeżdżało się i nie wiem jak to zrobic aby właśnie tak nie było