如何确保均匀显示 DIV 内的背景图像
[英] How to ensure the background image inside a DIV is evenly shown
本文介绍了如何确保均匀显示 DIV 内的背景图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的 ASP.net 页面中有以下代码(我希望它具有响应性):
<div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size:封面;文本对齐:居中;">请登录
CSS:
.mobileTabsNav{显示:无;宽度:100%;溢出:隐藏;}@media(最大宽度:715px){.mobileTabsNav{显示:块;}}
图像的底部似乎被剪掉了:
当我将其更改为 background-size: 100% 100%;
时,图像在某些屏幕上被拉伸太多,如下所示:
如您所见,图像失真.
无论如何要确保不同屏幕尺寸的曲线完全相同,还是我必须添加三个单独的图像?
小提琴上使用的图像:
.mobileTabsNav{宽度:100%;溢出:隐藏;}
<div style="float: left; background: url('http://i.stack.imgur.com/NnCbY.png') no-repeat; min-height: 50px; min-width: 10px; max-宽度:10px;背景尺寸:包含;">
<div style="background: url('http://i.stack.imgur.com/KbPm8.png')"></div><div style="float: right; background: url('http://i.stack.imgur.com/rll1d.png') no-repeat; min-height: 50px; min-width: 10px; max-宽度:10px;背景尺寸:包含;">
解决方案
我要做的是创建一个背景图像,它可以很好地用作重复图案(平铺),然后使用 border-radius
属性以获得圆角.
在这种方法中,无论屏幕大小如何,点的大小始终相同,并且您只需要为所有设备提供一张图片.
.mobileTabsNav {}.mobileTabsNav .inner {最小高度:400px;背景:#00ff00 url(http://i.stack.imgur.com/M8WDz.png);文本对齐:居中;边框半径:25px;}
<div class="inner">请登录
顺便说一句,这里是如何裁剪背景以使平铺看起来正确:
I have the following code in my ASP.net page (I would like it to be responsive):
<div class="mobileTabsNav">
<div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size: cover; text-align: center;">
PLEASE SIGN IN
</div>
</div>
CSS:
.mobileTabsNav
{
display: none;
width: 100%;
overflow: hidden;
}
@media (max-width: 715px)
{
.mobileTabsNav
{
display: block;
}
}
It seems the bottom portion of the image is getting cut off:
When I change it to background-size: 100% 100%;
, the image is stretched too much on certain screen as in the example shown here:
As you can see the image is distorted.
Is there anyway to ensure the curve is the same across the board of different screen sizes or do I have to add three separate images?
The image being used on the Fiddle:
.mobileTabsNav
{
width: 100%;
overflow: hidden;
}
<div class="mobileTabsNav">
<div style="float: left; background: url('http://i.stack.imgur.com/NnCbY.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">
</div>
<div style="background: url('http://i.stack.imgur.com/KbPm8.png')"></div>
<div style="float: right; background: url('http://i.stack.imgur.com/rll1d.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">
</div>
</div>
解决方案
What I would do is create a background image that works well as a repeated pattern (tileable) and then use the border-radius
property to get the rounded corners.
In this method, the dots will always be the same size regardless of the screen size,
and you only need a single image for all devices.
.mobileTabsNav {
}
.mobileTabsNav .inner {
min-height: 400px;
background: #00ff00 url(http://i.stack.imgur.com/M8WDz.png);
text-align: center;
border-radius: 25px;
}
<div class="mobileTabsNav">
<div class="inner">
PLEASE SIGN IN
</div>
</div>
As an aside, here is how the background might be cropped to get the tiling to look right:
这篇关于如何确保均匀显示 DIV 内的背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!