Logo Hardware.com.br
Mauriciodez
Mauriciodez Highlander Registrado
4.9K Mensagens 1.6K Curtidas
#3 Por Mauriciodez
18/02/2020 - 18:46
esquiloesperto disse:


essa imagem é uma barra semi-transparente ... eu não estou conseguindo fazer a responsividade ... ela tem mais ou menos 10vw e eu quero colocar ela com 100vh ... ou do container ou do body todo.

a página tem 9 containers .. ou faço uma barra por container ou faço uma barra em todo body ... não consegui fazer nem um e nem outro.


" Nem sempre é amigo aquele que te tira do buraco !!! ( Saddam Hussein )"
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#4 Por esquiloesper...
19/02/2020 - 03:22
A maneira mais versátil para estender imagens é obtida com a propriedade background.

Ajudaria bastante se você respondesse as perguntas que fiz.

A imagem "tem" 10vw, mas este é o espaço final que a "faixa" irá ocupar em cada lugar ou deverá estender por toda a área (100x100)?
Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
Mauriciodez
Mauriciodez Highlander Registrado
4.9K Mensagens 1.6K Curtidas
#5 Por Mauriciodez
19/02/2020 - 07:18
esquiloesperto disse:


Eu coloquei uma "imagem" no exemplo mas pode ser um simples DIV com background-color ... o lance é que preciso de varios containers com largura 100%, com altura variável e que tenha uma faixa lateral que ocupe 10% da largura e 100% da altura do container .

essa barra lateral é uma cor sólida com opacidade ... é uma barra bem simples, só perfumaria, mas que o chefe faz questão dela !!! No caso, essa barra pode ser relativa a simplesmente 1 container ou relativa ao body todo.

Consegui responder ???

Abçs


" Nem sempre é amigo aquele que te tira do buraco !!! ( Saddam Hussein )"
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#6 Por esquiloesper...
19/02/2020 - 10:26
Um exemplo de como obter isto seria:
<section class="content">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</section>

[code=CSS].content div {
padding: 10px;
height: 100vh;
margin-bottom: 1rem;
background-size: 10vw;
background-repeat: repeat-y;
background-image: url('https://www.hardware.com.br/static/c/d/2020/02/231459_2d3173d5cbe0f2bd9763acce7b783cce.jpg');
}[/code]

Alternativamente pode usar a opção "inline" para a definição do background, como visto no modelo:
"Código funcional"

<!DOCTYPE html>
<html lang="pt-BR">

<head>
<meta charset="utf-8" />

<meta name="author" content="esquiloesperto" />
<style>
.content div {
padding: 10px;
height: 100vh;
margin-bottom: 1rem;
background: url('https://www.hardware.com.br/static/c/d/2020/02/231459_2d3173d5cbe0f2bd9763acce7b783cce.jpg' 0/10vw repeat-y;
}
</style>
</head>

<body>
<section class="content">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</section>
</body>

</html>



wink.png

Anexos

Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
Mauriciodez
Mauriciodez Highlander Registrado
4.9K Mensagens 1.6K Curtidas
#7 Por Mauriciodez
19/02/2020 - 11:01
Não é isso que preciso ... eu até já tinha conseguido algo parecido ... qual o problema dessa solução ... ela me da um height 100% do viewpoint e meus container tem alturas variadas, alguns tem altura de 60%, outros de 500%, outros de x% em relação ao viewpoint... eu preciso que essa barra se adeque ao div.

segue abaixo o que preciso para vc ter uma ideia mais exata

Anexos



" Nem sempre é amigo aquele que te tira do buraco !!! ( Saddam Hussein )"
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#8 Por esquiloesper...
21/02/2020 - 02:11
Desculpe por não ter respondido antes, mas o trabalho tomou todo o meu tempo; tanto que só agora consegui chegar de lá.

Para conseguir obter o efeito mostrado na imagem só é preciso alterar um pouco o CSS:
[code=CSS]body {
margin: 0;
background-size: 10vw;
background-repeat: repeat-y;
background-image: url('https://www.hardware.com.br/static/c/d/2020/02/231459_2d3173d5cbe0f2bd9763acce7b783cce.jpg');
}
body div {
padding: 1em;
padding-left: calc(10vw + 1em);
}
body div:nth-child(odd) {
height: 40vh;
background-color: transparent;
}
body div:nth-child(even) {
height: 25vh;
background-color: rgba(0, 0, 255, 0.5);
}
[/code]

As divs podem ter qualquer altura.
No código as alturas foram estabelecidas a título de exemplo, somente.
Verifique aí.
Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
© 1999-2025 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal