传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背
/* 通过以下两个参数实现背景图片等比例缩放并填充*/ background: url(../images/banner.jpg) no-repeat; background-size: 100% 100%; ...
转载
2021-08-12 23:05:00
8084阅读
2评论
css背景图根据屏幕大小自动缩放代码：<style>
html,body{margin:0px;padding:0px;}
#background { position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f; display:none\8;}
原创
2013-07-24 13:40:43
6037阅读
点赞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
原创
2022-07-10 00:04:03
162阅读
文章目录一、背景颜色及背景图片二、背景平铺三、背景定位四、背景关联和缩写五、背景图片和插入图片的区别六、背景图片练习七、CSS精灵图（fw软件）八、精灵图练习 一、背景颜色及背景图片1、CSS中有一个属性专门用来设置标签的背景颜色：background-color。2、CSS中有一个属性专门用来设置背景图片：background-image: url() 注意： （1）图片地址必须放在url()
转载
2023-07-18 11:27:43
436阅读
html
原创
2023-02-10 09:43:33
136阅读
问题: CSS实现背景图片全屏铺满自适应的方式解决：（1）background-image:可添加多张背景图片。
参数：url() || none(默认)
background-image: url(images/scroll_top.jpg),
url(images/scroll_bottom.jpg),
CSS让背景平铺的代码 repeat-x ，也就是沿着X方向重复下去（横向平铺)； repeat-y （纵向平铺）{
background-p_w_picpath: url('#.jpg);
background-repeat: repeat-x
}网页默认全屏平铺代码 来源body{background:url(#.g
原创
2014-12-27 22:22:30
1826阅读
css之background的cover和contain的缩放背景图 对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景 ...
转载
2021-11-03 09:12:00
1160阅读
2评论
1.由于采用rem计算，头部背景图自动适配时，某些机型下背景图底部会有细微的缝隙，造成背景色露底。所以采用背景图+背景色渐变方案。代码如下：.plan-head{ padding-left: 1rem; height:9.78rem; color: #fff; background: url(./images/head@2x.
原创
2022-01-25 11:14:29
1448阅读
1.由于采用rem计算，头部背景图自动适配时，某些机型下背景图底部会有细微的缝隙，造成背景色露底。所以采用背景图+背景色渐变方案。代码如下：.plan-head{ padding-left: 1rem; height:9.78rem; color: #fff; background: url(./images/head@2x.png) no-repeat bottom / contain,linear-gradient(to bottom, #32D2FF 0%, #3.
原创
2021-07-12 11:21:21
2518阅读
默认情况下，如果一幅背景图像不足以占满整个容器时，就会在水平方向和垂直方向重复，以填满整个容器。然而，有时候却希望背景图像只出现一次，或只在某个方向上重复。这时，就可以通过 background-repeat属性来定义背景图像如何重复，即背景图像的平铺方式，默认值为 repeat。不同取值的含义见表表 4‑5： 表 4-5 background-repeat属性的取值及含义
属性值含义re
转载
2023-07-10 18:24:35
193阅读
<div id="con"><img id="pic" src="maskimg/star.jpg"></div>
body{ margin:0; padding:0;}
#con{
position:absolute;
top:0;
left:0;
height:100%;
1
原创
2023-06-03 00:06:08
187阅读
点赞
关于宽度自适应，已经是前段开发人员必备的css技能之一，而背景图的合并则属于更高级别的要求。
我们为什么要宽度自适应，原因大体有以下几点：
第一：很多情况下有这样的需求，比如做B/S前端，90%以上要求整体宽度自适应。这种情况下大多数都采用了js框架，比喻Ext，Dojo等。而我们用CSS按自己的需求写一个自适应的页面，也是完全可以实现的，速度也会快的多。
第二：便于后期
转载
精选
2012-10-08 14:37:40
916阅读
还可以用于列表元素，甚至搜索框内展示图标也可以借此实现。属性可应用于绝大部
原创
2023-01-04 14:03:17
123阅读
首先解释下CSS Sprites是什么：有称CSS精灵，有称CSS雪碧的，无论叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，这样不但减少http请求，而且还降低了图片的大小，加快图片的加载速度，对前端开发的朋友来说是必备技能。更详细的解释请到【百度百科】围观。雪碧图使用场景1.静态图片，不随用户信息的变化而变
开发中，常用的背景样式有下面几个：background-colorbackground-imagebackground-repeatbackground-sizebackground-positionbackground-clipbackground-originbackground-attachmentbackground背景的简写属性话不多说，直奔主题。。。background-color作用
做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题：1.图片及带背景图片的块宽高等比缩放布局2.margin,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。带背景图片的div就有点麻烦了，宽度可以使用百分比，但高度如果不设置具体像素数，会按照内容大小自动布局，这个问题
转载
精选
2016-05-15 18:27:09
3590阅读
css背景属性背景属性给页面元素添加背景样式。 background可以设置。背景颜色： background-color： 颜色；背景图片： background-image：url（图片地址）；背景平铺： background-repeat： 背景铺设；背景图片位置： background-position：x y；背景图像固定： b
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出，有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式，当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。先看demo，打开后，调整浏览器窗口大小，观察背景图的变化。如果在你的项目中也需要这
