background-size与背景图片填满div在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求background-size的取值及解释background-size共有三种属性，分别为background-size: coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn‘t get squished). The ima...
<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%"/></div>原文：http://www.cnblogs.com/yutaoyao/p/4164415.html
CSS Filter 是 IE 特有的技术，其他浏览器均不支持，所以为了最大的兼容性及标准化，应尽量避免为 IE 单独使用 Filter，如需要其某些特效，应同时考虑其他浏览器， 图片渐变 复制代码代码如下:<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)"> 表格渐变 复制代码代码如下:<table style="FILTER: Alpha( style=1,opacity=25,finis...
1、 背景颜色background-color:后面跟颜色属性2、 背景图片background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复的话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。参数none：无背景（默认）url：使用绝对或相对地址指定背景图像3、 背景平铺即所选背景图片是否填充整个样式区域语法background-repeat : repeat | no-repe...
网格 html {background: #58a;background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);background-size: 50px 50px, 50px 50px,10px 10px, 10px 10px;}具体效果见链接波点可以用如下代码来实现background: #655; background-image:...
1.设置页面的背景颜色body{margin:0px;background-color:lightskyblue;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我的CSS</title></head><body><h1>我的CSS web页！</h1><p>Hello World！</p></body></html>2.设置不同元素的背景颜色1h1{ 2 background-color:roy...
本文属于 CSS 绘图技巧其中一篇，系列文章：在 CSS 中使用三角函数绘制曲线图形及展示动画CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ 4 background...
body{ background: url(img/bgcolor.jpg); background-size: 100% 100%; background-position: center center; overflow: auto; }原文：https://www.cnblogs.com/starwei/p/12495394.html
针对透明背景，包括背景图片和背景色（兼容IE，FF，OP等浏览器）一、背景完全透明 .bg{background:transparent } 二、背景半透明这里要分两个div，一个单独设置背景透明度，另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。css: .bg{ width: 1000px; height:33px; background-color:#fffff; background-image:url(img.jpg);filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; -khtml-opacity: 0.3;}...
css设置div背景透明有3种方法方法一：1 opacity：0~1这个方法有个缺点，就是内容也会跟着透明方法二：1 background-color:rgba(0,0,0,0~1)这个方法会使div背景透明，并且不会影响到div里的内容。方法三：1 background: transparent;这个方法会使div背景透明，并且不会影响到div里的内容。原文：https://www.cnblogs.com/wodewei/p/14762445.html
图片本身的优化： 图像质量要求和图像文件大小决定你用什么格式的图片，用较小的图片文件呈现较好的图像质量。 当图片色彩过于丰富且无透明要求时，建议采用jpg格式并保存为较高质量。 当图片色彩过于丰富又有透明或半透明要求或阴影效果时，建议采用png24格式，并对IE6进行png8退化（或在不得已情况下使用滤镜）。 当图片色彩不太丰富时无论有无透明要求，请采用png8格式，大多数情况下建议采用这种格式。 当图片有动画时，只能使...
HTML代码HTML代码结构很简单，跟之前那篇文章使用的相同：复制代码代码如下:<div id="raysDemoHolder"> <a href="/" id="raysLogo">WebHek</a> <div id="rays"></div></div>最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。 CSS代码我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframe...
边框圆角边框盒阴影边界图片 圆角CSS3 圆角制作器 指定每个角 背景 多重背景图像大小图像的定位背景剪裁 渐变线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义指定角度的线性渐变多个颜色节点的线性渐变线性渐变------透明度重复的线性渐变重复渐变渐变的大小closest-sidefarthest-sideclosest-cornerfarthest-corner 文本效果文本阴影 盒子阴影 阴影颜色...
## CSS2 背景##### background-color 设置背景颜色##### background-image 设置背景图片- ````background-image：url（"图片的路径"）;````##### background-repeat 设置背景图片的重复方式 - repeat 默认值. 使背景图片在水平和垂直两个方向重复.以铺满元素 - repeat-x 水平方向重复 - repeat-y 垂直方向重复 - no-repeat 图片不重复##### background-position 设置背景图片显示位置- 默认背景图片是从左上角开始显示. - 设置方式...