繁体   English   中英

如何将div放在网格中的div后面并偏移它?

[英]How to put div behind div in grid and offset it?

我有两个包含海报图像的 div。 我想在每个海报后面放另一张海报并执行以下操作:

  • 用一些 x 和 y 值偏移它
  • 用半透明的div覆盖它以使其更暗
  • 在保持纵横比的同时减小其尺寸

如何在现有网格内完成,并且不改变前面的两张海报?

在此处输入图像描述

 films = [ {id: 0, title: 'Welcome Home', year: 2009}, {id: 2, title: 'Aurie', year: 2001}, {id: 3, title: 'Hardship', year: 2005}, {id: 4, title: 'Forth to the past', year: 2004}] data = { film0: films[0], film1: films[1], film2: films[2], film3: films[3] } function update() { poster1 = "https://unsplash.it/458/679.jpg"; poster2 = "https://unsplash.it/458/679.jpg"; document.getElementById("name1").innerText = data.film1.title; document.getElementById("name2").innerText = data.film2.title; document.getElementById("year1").innerText = data.film1.year; document.getElementById("year2").innerText = data.film2.year; document.getElementById("poster1").setAttribute("src", poster1); document.getElementById("poster2").setAttribute("src", poster2); } update();
 body { background-color: rgb(40, 40, 40); } div { border: 1px solid red; }.container { display: grid; grid-template-columns: 20% 25% 8% 25% 20%; grid-gap: 0.5%; padding: 1%; color: white; font-family: sans-serif; text-align: center; }.header, .footer { grid-column-start: 1; grid-column-end: 6; padding: 30px; font-size: 50%; }.poster-container { position: relative; }.poster { object-fit: cover; width: 100%; height: 100%; }.title { background-color: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; bottom: 0; left: 0; padding-top: 7%; padding-bottom: 7%; line-height: 150%; font-size: 110%; }.year { font-size: 90%; }.poster-container:hover >.title {} a { all: unset; } a:hover{ cursor: pointer; }.shutdown{ background-color: rgba(255, 0, 0, 0.5); padding: 1%; }.shutdown:hover{ cursor: pointer; };
 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="header"></div> <div></div> <div class="poster-container"> <img class="poster" id="poster1" /> <div class="title"> <a id="poster1-link" target="_blank"> <div class="name" id="name1"></div> </a> <div class="year" id="year1"></div> </div> </div> <div></div> <div class="poster-container"> <img class="poster" id="poster2" /> <div class="title"> <a id="poster2-link" target="_blank"> <div class="name" id="name2"></div> </a> <div class="year" id="year2"></div> </div> </div> <div></div> </div> </body> </html>

我设法找到了解决方案:

 films = [ {id: 0, title: 'Welcome Home', year: 2009}, {id: 2, title: 'Aurie', year: 2001}, {id: 3, title: 'Hardship', year: 2005}, {id: 4, title: 'Forth to the past', year: 2004}] data = { film0: films[0], film1: films[1], film2: films[2], film3: films[3] } function update() { poster0 = "https://unsplash.it/458/679.jpg"; poster1 = "https://unsplash.it/458/679.jpg"; poster2 = "https://unsplash.it/458/679.jpg"; document.getElementById("name1").innerText = data.film1.title; document.getElementById("name2").innerText = data.film2.title; document.getElementById("year1").innerText = data.film1.year; document.getElementById("year2").innerText = data.film2.year; document.getElementById("poster1").setAttribute("src", poster1); document.getElementById("poster2").setAttribute("src", poster2); document.getElementById("poster0").setAttribute("src", poster0); document.getElementById("poster3").setAttribute("src", poster0); } update();
 body { background-color: rgb(40, 40, 40); }.container { display: grid; grid-template-columns: 20% 25% 8% 25% 20%; grid-gap: 0.5%; padding: 1%; color: white; font-family: sans-serif; text-align: center; }.header, .footer { grid-column-start: 1; grid-column-end: 6; padding: 30px; font-size: 50%; }.poster-container { position: relative; }.poster { object-fit: cover; width: 100%; height: 100%; }.title { background-color: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; bottom: 0; left: 0; padding-top: 7%; padding-bottom: 7%; line-height: 150%; font-size: 110%; }.year { font-size: 90%; }.remove { background-color: rgba(255, 255, 255, 0.2); padding: 5%; font-size: 90%; } a { all: unset; } a:hover { cursor: pointer; }.shutdown { background-color: rgba(255, 0, 0, 0.5); padding: 1%; }.shutdown:hover { cursor: pointer; }; .poster0 {}.double0 { position: relative; }.double3 { position: relative; }.poster0 { position: absolute; left: -50%; top: -10%; z-index: -1; width: 80%; height: 80%; }.poster3 { position: absolute; right: -50%; top: -10%; z-index: -1; width: 80%; height: 80%; }.overlay0 { position: absolute; left: -50%; top: -10%; z-index: 0; width: 80%; height: 80%; background-color: rgba(0, 0, 0, 0.5); }.overlay3 { position: absolute; right: -50%; top: -10%; z-index: 0; width: 80%; height: 80%; background-color: rgba(0, 0, 0, 0.5); }
 <;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="header"></div> <div></div> <div class="double0"> <div class="overlay0"></div> <img class="poster poster0" id="poster0" /> <div class="poster-container"> <img class="poster" id="poster1" /> <div class="title"> <a id="poster1-link" target="_blank"> <div class="name" id="name1"></div> </a> <div class="year" id="year1"></div> </div> </div> </div> <div></div> <div class="double3"> <div class="overlay3"></div> <img class="poster poster3" id="poster3" /> <div class="poster-container"> <img class="poster" id="poster2" /> <div class="title"> <a id="poster2-link" target="_blank"> <div class="name" id="name2"></div> </a> <div class="year" id="year2"></div> </div> </div> </div> <div></div> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM