gpt4 book ai didi

html - 具有 3 种不同背景的侧边栏

转载 作者:太空宇宙 更新时间:2023-11-03 18:45:26 24 4
gpt4 key购买 nike

我目前正在尝试让我的边栏使用 3 种不同的背景。 Screenshot

我试图用 3 个容器来修复它,但我做不对(顶部图像消失等)。任何有关如何执行此操作的最佳方法的建议都很棒。

Demo

HTML

<div class="footer">
<div class="head">
<div class="block">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
</div>
</div>
</div>

CSS

.footer {
background: url(http: //i.imgur.com/NNtfaL6.png) bottom left no-repeat;
width: 190px;
margin-left: 20px;
}
.head {
background: url(http: //i.imgur.com/sOVew68.png) top left no-repeat;
width: 260px;
}
.block {
background: #1b1b1b;
color: #fff;
width: 175px;
margin-left: 80px;
}

最佳答案

推拉门

与其使用 2 个小图像并用背景色填充其余图像,不如使用 make the top image taller than needed 简单得多。 , 并在底部使用相同的小图像。因为图像是 PNG 格式,使顶部图像非常高不会增加图像的大小(因为添加的部分只是 2 种不同颜色的 block ,这在 PNG 图像中非常有效地压缩)。

这种使用比需要大得多的图像的方法称为“滑动门”。通常,它水平应用来设置可变宽度内容的样式,但它也可以垂直使用,就像在本例中一样,设置可变高度内容的样式。

Updated Demo (如果在 JSFiddle 中运行它有任何问题,这里是演示的 standalone version)

HTML

<div class="outer">
<div class="inner">
Test<br/>Test<br/>Test<br/>Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</div>

CSS

.outer {
/* Short bottom image */
background: url(http://i.imgur.com/q3Y9q16.png) 70px bottom no-repeat;
width: 266px;
padding-bottom: 36px; /* Same as height of short bottom image */
}
.inner {
/* Tall top image */
background: url(http://i.imgur.com/xxRw8zW.png) 0px top no-repeat;
color: #fff;
padding: 74px 10px 20px 90px;
}

关于html - 具有 3 种不同背景的侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16498571/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com