设置背景图片的大小，以长度值或百分比显示，还可以通过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 设置背景图片显示位置- 默认背景图片是从左上角开始显示. - 设置方式...
译文原链接：http://codetheory.in/html5-fullscreen-background-video/前言：当网页载入时，自动播放的全屏背景视频 已经成为当前颇受欢迎的趋势。 就个人而言，我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住，视频的故事必须与品牌相关。 近年来，我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能，因此我决定构建一个用到 HTML5 视...
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。#------------------------------------------------我是可耻的分割线-------------------------------------------<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="height:35px;width:400px;position:relative;"><input type="text" style="height:35px;width:370px;padding-right:30px;"/><span style="...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300p...
一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但 是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不 支持Opera浏览器。本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明...
今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近，由近到远一种飞跃效果。效果非常好看，我们一起看下效果图： 在线预览 源码下载 我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。html代码：<div class="container" style="opacity: 0.55; -webkit-perspective: 50px;"><div st...
之前做项目的时候，用opacity属性，但是这个属性用后，不但背景会半透明，背景上的文字也会变成半透明。显然用opacity属性实现这个效果是不可取的。在css3中我们可以用 background-color:rgba(); 来实现，rgb是背景要显示的颜色，a则是背景的透明度，从而实现我们想要的效果。本人亲自做过实验，希望可以帮到大家，谢谢。。 原文：http://www.cnblogs.com/bjwhite/p/6385904.html
一直以来都认为css背景图与直接插入img图片的效果是差不多的，直到最近拜读了一位大神的作品，发现大部分图片都是通过背景图形式显示的，于是在此总结了下二者的区别：1. css中的图片以背景图形式存在，写在html中的图片以标签形式存在。而在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。附：在一个单纯由Html和Css组成的页面中，...