div+css怎么让背景图片自动缩放

你指的自动缩放,是根据窗口(容器)大小改变而自动改变背景图的大小么?

如果是,请看下面:

<body>

<div style="width:100%;height:50px;background: url(a。jpg) no-repeat center top;background-size: 100%;">

</div>

</body>

在body里放一个div,宽度为100%(与浏览器窗口一样宽),然后给div添加背景图,这个窗口大小改变时,div的大小因为设置为100%所以一起改变。

这里div的背景图也会随div大小的改变而一起改变,因为为图片设置了background-size: 100%;这个css样式,它的意思是规定背景图像的尺寸,但这个css样式使用时需要注意,有些浏览器是不支持的,比如IE要求9+的版本才可以支持。

你可以把这段代码拷贝到你的html中测试一下,有问题可以随时追问。

以上,希望对你有帮助。

div+css怎么让背景图片自动缩放

这样你就可以按照百分比来设置,把以前的像素px设置成百分比就可以了。

或者background:url(../../config/img/Title.png) no-repeat;不重复background:url(../../config/img/Title.png) repeat-x;横向平铺background:url(../../config/img/Title.png) repeat-y;竖着铺用这些设置也是可以实现的。

div+css怎么让背景图片自动缩放

css 背景随页面 缩放

html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放,或用代码。

具体方法如下:1。 Ctrl+鼠标滚轮滑动缩放2。 css代码与htlm代码3。 CSS 代码如下:#background{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f;display:none\8;}#background 。bg-photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;overflow: hidden;-webkit-background-size: cover !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;}#background 。bg-photo-1{background: url('。。/image/alone。jpg') no-repeat center center;}#background-ie {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f;}4。 HTML代码如下:

如何利用css将图片设置为背景图,根据不同分辨率的屏幕,自动缩放

1920像素是目前主流显示器的最大横向分辨率(当然更高的也有,但还不常见),1024则是最小的分辨率(更小的也有,比如800*600的,但已经很少有人用了),所以天猫或淘宝店装修时在轮播图中一般都是用的1920宽度的图片,目的是为了使用大显示器的用户能够看到完整的图片,但是在具体的构图上,都是把主体内容(比如产品和模特的图片、文字等)放在最中间约990到1000像素宽的范围(是1024去掉浏览器滚动条和边框的宽度),两边则只放一些装饰性的元素,这样的话使用小尺寸显示器的用户也能看到基本完整的内容。

目前大部分天猫店铺基本上都是这么处理图片的,包括那些日营业额上千万的牛店。

淘宝店铺则由于官方的限制,一般只在轮播图上使用这种方式。

你如果一定要在任何显示器上都显示完整的1920宽的图片,只需在图片代码上加个100%的宽度即可,比如:附注:根据你的店铺代码,有可能会无效。

个人建议尽量不要这么做,因为大图片缩小后质量会变差,而且里面的文字、产品图片会小很多,会大大降低使用小显示器的用户体验。

css nav 导航选项卡背景 宽度 自动怎么控制

不清楚你的背景是有阴影的具体是描述的什么,反正根据你截图来看,你的背景图要设置为横向重复,重点是你要把 a 标签浮动起来,而不是仅仅把 li{float:left;}此处我假设你的 nav 结构是 ul &gt; li &gt; a 形式:---------------------- css ----------------------#nav{...}/*ul的背景图代码和其他代码*/#nav li,#nav a{float:left;}/*a 和 li 一样,都得浮动起来,这是 a 自适应宽度的关键*/#nav a{display:block;padding:0 20px;line-height:30px;back...:你的a标签背景图代码;}#nav li{ma...:li的外边距代码,让每个按钮左右之间产生距离_display:inline;/*ie出现双倍浮动边bug时修正*/}

转载请注明出处恩恩科技网 » div+css怎么让背景图片自动缩放

相关推荐

    8828彩票计划群 必发彩票计划群 极速赛车登陆 极速赛车怎么充值 菠萝彩票计划群 138彩票计划群 山东11选5走势 极速赛车规律图 内蒙古11选5走势图 58彩票网计划群