我想知道是否有一种简单的方法可以在多个div中"平铺"或"窗口"单个背景图像。我想创造一种打孔的窗户外观。
请记住,我想动态添加这些框。最多会有 16 个,但我可能有 9 个。
我这里有一个小提琴:链接到小提琴
我想做的是不是显示背景图像,而是白色的。div不是白色的,而是包含背景图像的那部分。抱歉,如果这不是一个很好的描述,但基本上我想将白色与背景交换。
所以像这样:
<div id="blocks">
<div class="block" style=" background: some-section-of-image ;"></div>
<div class="block" style=" background: some-section-of-image2;"></div>
<div class="block" style=" background: some-section-of-image3;"></div>
<div class="block" style=" background: some-section-of-image4;"></div>
</div>
我想用尽可能少的 jQuery 来做到这一点......但也许这是不可行的。
我摆弄了一些设置
opacity:0.0;
仅在块上,但无法弄清楚如何在其他地方不显示图像。谢谢!
一个仅限 CSS 的解决方案
您描述的基本上是一个带有背景图像和白色边框的表格。一个简单的解决方案可以通过仅使用 CSS 创建类似表格的布局来实现。
.blocks {
display:table-row;
}
.block {
display:table-cell;
height:100px;
border:15px solid #FFF;
}
#background-container {
display:table;
width:100%;
border-collapse:collapse;
box-sizing:border-box;
background: url(https://i.imgur.com/2IqWvm5.jpeg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="background-container">
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
我几乎是100%。随意(任何人)编辑答案。
.CSS
#blocks {
width:100%;
height:100px;
}
.block {
float: left;
overflow: hidden;
margin: 2%;
width: 20%;
height: 100%;
background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}
jQuery (JS)
$(function () {
var posX = 0;
var posY = 0;
var i = 0;
$(".block").each(function (ind, el) {
$(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
posX += 20;
i++;
if (i == 4) {
i = 0;
posX = 0;
posY += 25;
}
});
});
演示(待改进):http://jsfiddle.net/bzCNb/33/
我发现这个问题很有趣,并想知道现在使用vanilla JavaScript对于任何瓷砖形状或位置来说
,这样做有多难。答:没那么难。
下面的代码片段说明了使用3种不同的方式为平铺图像布置磁贴,所有这些都由相同的JavaScript代码处理。
它适用于以下算法:
- 查找具有类
tiled-image
的元素。将此框架的尺寸用于图像布局 - 在其中找到第一个
<img>
元素:将其src
用作平铺图像。删除它 - 对于所有包含类
tile
的元素,找到它们的位置,将其background
设置为图像,并background-position
偏移,使其始终与框架的左上角匹配,background-size
设置为框架的大小
当前限制:帧的大小必须与图像的纵横比匹配。可以轻松改进动态图像大小
window.addEventListener('load', _e=> {
const tFrames = document.querySelectorAll('.tiled-image');//Find tiled frames
tFrames.forEach(frame => { //For each one
const img = frame.querySelector('img'); //Retrieve first img
if (!img || !img.src) return;
img.remove(); //Remove it
const src = img.src; //Store its src
const fBounds = frame.getBoundingClientRect(); //Store position of frame
frame.querySelectorAll('.tile').forEach(tile => { //For each tile
tile.style.backgroundImage = `url('${src}')`; //Set bg image to img's src
const tBounds = tile.getBoundingClientRect(); //Find position
//Position background to frame's upperleft corner
const bx = tBounds.left - fBounds.left;
const by = tBounds.top - fBounds.top;
tile.style.backgroundPosition = `left ${-bx}px top ${-by}px`;
//Set background size to frame's size
tile.style.backgroundSize = `${fBounds.width}px ${fBounds.height}px`;
});
});
});
/*General positioning */
.tiled-image {
box-sizing: content-box;
width: 800px;
height: 600px;
}
/* fallback to regular image if javascript doesn't run */
.tiled-image img {
display: block;
width: 100%;
height: 100%;
}
/* DONE. The rest is decoration and specific tile positioning for the 3 examples */
body {
background: linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(145,145,167,1) 35%, rgba(70,80,82,1) 100%);
}
.light-text {
color: gainsboro;
}
.tiled-image + .tiled-image {
margin-top: 1em;
}
/* debugging help */
/*
.tiled-image {
outline: 1px solid blue;
}
.tiled-image .tile {
outline: 1px solid red;
}
*/
/* regular grid */
#ti-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
/* irregular grid */
#ti-3 {
display: grid;
grid-template-areas:
"a a c c c c"
"b b c c c c"
"b b d d e e"
"b b d d e e";
grid-gap: 10px;
}
#ti-3 .ta { grid-area: a; }
#ti-3 .tb { grid-area: b; }
#ti-3 .tc { grid-area: c; }
#ti-3 .td { grid-area: d; }
#ti-3 .te { grid-area: e; }
/* position absolute */
#ti-2 { position: relative; }
#ti-2 .tile { position: absolute; }
#ti-2 .t0-0 {
left: 0;
top: 10px;
width: 150px;
height: 200px;
}
#ti-2 .t0-1 {
left: 180px;
top: 0;
width: 220px;
height: 400px;
}
#ti-2 .t0-2 {
left: 410px;
top: 30px;
width: 380px;
height: 510px;
}
#ti-2 .t1-0 {
left: 20px;
top: 220px;
width: 150px;
height: 380px;
}
#ti-2 .t1-1 {
left: 180px;
top: 420px;
width: 210px;
height: 170px;
}
#ti-2 .t1-2 {
top: 560px;
left: 400px;
height: 40px;
width: 400px;
}
<h4 class="light-text">With regular grid</h4>
<div class="tiled-image" id="ti-1">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-048.jpg" />
<div class="tile t0-0"></div>
<div class="tile t0-1"></div>
<div class="tile t0-2"></div>
<div class="tile t1-0"></div>
<div class="tile t1-1"></div>
<div class="tile t1-2"></div>
<div class="tile t2-0"></div>
<div class="tile t2-1"></div>
<div class="tile t2-2"></div>
</div>
<!-- DONE. Next examples use the same code with different numbers of tiles -->
<h4>With irregular grid</h4>
<div class="tiled-image" id="ti-3">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-042.jpg" />
<div class="tile ta"></div>
<div class="tile tb"></div>
<div class="tile tc"></div>
<div class="tile td"></div>
<div class="tile te"></div>
</div>
<h4>With position: absolute</h4>
<div class="tiled-image" id="ti-2">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-047.jpg" />
<div class="tile t0-0"></div>
<div class="tile t0-1"></div>
<div class="tile t0-2"></div>
<div class="tile t1-0"></div>
<div class="tile t1-1"></div>
<div class="tile t1-2"></div>
</div>
尝试将背景放在块上,而不是具有固定附件和左上对齐方式的页面。 不幸的是,如果页面滚动,则使用此选项,背景显示为固定。
.block{
float: left;
overflow: hidden;
margin: 2%;
width: 20%;
height: 100%;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
http://jsfiddle.net/bzCNb/28/