- Este tópico contém 3 respostas, 2 vozes e foi atualizado pela última vez 2 anos, 8 meses atrás por
.
-
Posts
-
-
olá sei que isso provavelmente ja deve englobar conteudo CSS3 porem estou com um tique nervoso querendo fazer com que a imagem de fundo desse meu projeto pessoal que estou fazendo para aplicar todos os desafios do curso dev web modulo 1 e a estetica da imagem de fundo acaba sobrepondo algumas coisas que faço e gostaria de deixa-la com a opacidade reduzida
`<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”shortcut icon” href=”Dota2.ico ” type=”image/x-icon”>
<title>Desafio Paginas Externas e internas</title>
<style>
body {background: url(images-icons/robotboy.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<h1> Thailam Ribeiro</h1>
<img src=”images-icons/eu.png” alt=”foto de thailam”>
<p><b>O Gordinho mais gostoso do brasil tentando sair do inutilismo e do desemprego ,<br> para realizar o sonho de juntar dinheiro e meter o pé para o japão.</b></p>
<h2>Redes sociais</h2>
<ol>
<ul type=”square”>
<li><img src=”images-icons/icone-youtube.png” alt=”Canal do Youtube”><a href=”https://www.youtube.com/channel/UCgBK4jDEPEduXax2C3EhRJQ” target=”_blank” rel=”external”> <b>Canal do Youtube</b></a></li>
<li><img src=”images-icons/icone-instagram.png” alt=”instagram”><a href=”https://www.instagram.com/tkthailam/” target=”_blank” rel=”external”> <b>Instagram</b></a></li>
<li><img src=”images-icons/icone-facebook.png” alt=”Facebook”><a href=”https://www.facebook.com/thailam.ribeiro” target=”_blank” rel=”external”> <b>Facebook</b></a></li>
<li><img src=”images-icons/icone-twitter.png” alt=”Twitter”><a href=”https://twitter.com/ThailamRibeiro” target=”_blank” rel=”external”> <b>Twitter</b></a></li></ul>
</ol>
<h2>Musicas Favoritas</h2>
<p><a href=”musicas-favoritas/index.html” rel=”next”><b>Click aqui</b>.</a></p>
<h2>Gameplays de Lineage II</h2>
<p><a href=”videos-lineage2/index.html”><b>Click aqui</b>.</a></p>
<h2>Highlights De Hunt Showdown</h2>
<p><a href=”hightlights-hunt/index.html”><b>Click aqui.</b></a></p>
</body>
</html>` -
Bom dia.
Por se tratar de html puro, pode usar algumas lógicas diferentes para se obter o mesmo resultado.
como por exemplo um container dentro do outro, sendo o externo apenas com a imagem e adicionado a opacidade, e no container filho, o conteudo e retornando a opacidade pra 1, ja q ele herda a opacidade do pai.
Mas prefiro trabalhar com containers separados (irmãos)
seguindo o mesmo principio de um levar apenas a imagem e outro o conteúdo. contudo, eles devem ser sobrepostos e fixos.<!DOCTYPE html> <html lang=”pt-br”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link rel=”shortcut icon” href=”Dota2.ico ” type=”image/x-icon”> <title>Desafio Paginas Externas e internas</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .img { position: fixed; top: 0; background: url(https://mcdn.wallpapersafari.com/medium/89/46/oGOhiA.jpg) no-repeat center center fixed; height: 100vh; width: 100vw; opacity: 0.5; z-index: -1; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } main { position: absolute; top: 0; left: 0; z-index: 1; height: 100vh; } </style> </head> <body> <div class="img"></div> <main> <h1> Thailam Ribeiro</h1> <img src=”images-icons/eu.png” alt=”foto de thailam”> <p><b>O Gordinho mais gostoso do brasil tentando sair do inutilismo e do desemprego ,<br> para realizar o sonho de juntar dinheiro e meter o pé para o japão.</b></p> <h2>Redes sociais</h2> <ol> <ul type=”square”> <li><img src=”images-icons/icone-youtube.png” alt=”Canal do Youtube”><a href=”https://www.youtube.com/channel/UCgBK4jDEPEduXax2C3EhRJQ” target=”_blank” rel=”external”> <b>Canal do Youtube</b></a></li> <li><img src=”images-icons/icone-instagram.png” alt=”instagram”><a href=”https://www.instagram.com/tkthailam/” target=”_blank” rel=”external”> <b>Instagram</b></a></li> <li><img src=”images-icons/icone-facebook.png” alt=”Facebook”><a href=”https://www.facebook.com/thailam.ribeiro” target=”_blank” rel=”external”> <b>Facebook</b></a> </li> <li><img src=”images-icons/icone-twitter.png” alt=”Twitter”><a href=”https://twitter.com/ThailamRibeiro” target=”_blank” rel=”external”> <b>Twitter</b></a></li> </ul> </ol> <h2>Musicas Favoritas</h2> <p><a href=”musicas-favoritas/index.html” rel=”next”><b>Click aqui</b>.</a></p> <h2>Gameplays de Lineage II</h2> <p><a href=”videos-lineage2/index.html”><b>Click aqui</b>.</a></p> <h2>Highlights De Hunt Showdown</h2> <p><a href=”hightlights-hunt/index.html”><b>Click aqui.</b></a></p> </main> </body> </html>Com esta configuração, msm que o conteudo seja maior que a view, o background irá continuar fixo e o scroll fluirá normalmente.
PS: O fórum é usado apenas para duvidas dos conteúdos do curso.
-
Muito obrigado professor , agora eu entendi , so mais uma perguntar como coloco o meu codigo aqui no forum assim entro desse quadrado ai e todo bonito e identado?
PS: peço perdão se perguntei algo fora do conteúdo do curso.
-
Na área onde você escreve existe uma barra de formatação de texto, contendo
B / LINK B-QUOTE DEL IMG UL OL LO CODE FECHAR TAGSEstes estilos seguem o padrão HTML.
no caso do código, basta selecionar todo o código aqui mesmo e clicar em CODE.
Notará que será inserido uma crase na inicio do código e outra no final. isto significa que ja estará formatado ao postar.
-
-
- Você deve fazer login para responder a este tópico.