以前看到很多大型网站,整个网站的背景图片,是同一张图片,下载他的背景图片,看到一张图片上有很多小图标。
也就是国外很流行的css sprites,目前国内也有很多网站这样用。
这次在写CSS+DIV时,也这样写了个整站,感觉虽然做网站的整站慢,但在网站的占用资源上,的确省了不少。
原理,一般网站的图片都是分开的,每个图片的调用都会占用一个IIS链接,而现在把所有图片放在一张图上时,
转载
2012-03-06 10:44:00
154阅读
2评论
问题: CSS实现背景图片全屏铺满自适应的方式解决:(1)background-image:可添加多张背景图片。
参数:url() || none(默认)
background-image: url(images/scroll_top.jpg),
url(images/scroll_bottom.jpg),
转载
2024-04-08 12:57:04
1111阅读
1.背景颜色(background-color)语法:background-color:颜色值;默认值是透明的 transparent代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width
5-1.html<html><head><title>背景颜色</title><style><!--body{ background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; pa
转载
2009-08-02 15:09:19
1204阅读
1.由于采用rem计算,头部背景图自动适配时,某些机型下背景图底部会有细微的缝隙,造成背景色露底。所以采用背景图+背景色渐变方案。代码如下:.plan-head{ padding-left: 1rem; height:9.78rem; color: #fff; background: url(./images/head@2x.
原创
2022-01-25 11:14:29
1542阅读
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
2583阅读
var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/style1/index_top_bg3.jpg", "../img/index/bgstyle/style1/index_top_bg1.jpg"]; //(设定想要显示的图片)
var i = 0;
var head=docu
转载
2023-06-06 11:28:04
425阅读
<style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorSt
转载
2016-08-19 16:30:00
1300阅读
点赞
# 使用 jQuery 设置 div 的背景图
## 流程概述
在这个项目中,我们将学习如何使用 jQuery 设置一个 `` 的背景图。整个流程可以分为以下几个主要步骤:
| 步骤 | 说明 |
| -------- | ----------------------------------- |
| 1 |
原创
2024-10-12 04:09:49
57阅读
<div style="background:url('./bailu.png');background-size:100%;height:600px;">122</div>内部嵌套div便于一块一块控制
原创
2022-11-07 11:48:02
159阅读
1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 注意:在同
转载
2016-04-28 09:52:00
559阅读
2评论
<style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,end
转载
2016-03-22 14:40:00
593阅读
2评论
背景相关属性 背景颜色 如何设置标签的背景颜色? 在 CSS 中可以通过 background-color 属性设置标签的背景颜色 取值: 具体单词 rgb rgba 十六进制 格式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
原创
2021-03-08 14:08:00
241阅读
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
1918阅读
background-color:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{
原创
2021-11-16 15:51:15
145阅读
文章目录一、背景颜色及背景图片二、背景平铺三、背景定位四、背景关联和缩写五、背景图片和插入图片的区别六、背景图片练习七、CSS精灵图(fw软件)八、精灵图练习 一、背景颜色及背景图片1、CSS中有一个属性专门用来设置标签的背景颜色:background-color。2、CSS中有一个属性专门用来设置背景图片:background-image: url() 注意: (1)图片地址必须放在url()
转载
2023-07-18 11:27:43
576阅读
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背
转载
2024-06-11 02:44:22
95阅读
css设置背景图片铺满整个元素
原创
2022-08-01 10:38:04
3295阅读
页面背景图像的代码 1.(最普遍类)<style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style>说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目
用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器。从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm代码: <style type="text/css">
.jbkeleyi{
height: 300px;
width:100px;
margin:0px auto;
background-image: -mo
转载
2023-08-24 10:41:03
292阅读