如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类： 1.是一整张大图，尺寸和区域大小刚好吻合 2.一个很小的条状图，通过repeat后...
这次给大家带来HTML与CSS中背景相关属性，使用HTML与CSS中背景相关属性的注意事项有哪些，下面就是实战案例，一起来看一下。一. 背景尺寸属性1.什么是背景尺寸属性 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小background-size:xxxx;取值:1.具体像素 >> background-size:200px 100px; 2.百分比 >> background-size:100% 80%; 3.宽度等比拉伸 >> background-size:auto 100px; 4.高度等比拉伸 >> background-size:...
这次给大家带来用H5和CSS3制作全屏背景轮换播放的制作方法，怎么用H5制作特效？H5和CSS3在使用过程中的注意事项有哪些，下面就是实战案例，一起来看一下。<!doctype html> <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全屏背景轮换播放</title><meta name="keywords" content="全屏背景轮换...
这次的案列是怎样用CSS隐藏图片背景的文字内容，我们先使用使用background背景是将图片设为背景显示；然后使用text-indent缩进是隐藏a链接内容和<a>链接标签是对文字设置锚文本链接。下面就是实例案列。实例案例描述这里便于观察CSS DIV案例效果，我们就来实现的网站的布局。扩展阅读：html img图片1、CSS 代码：h1#logo{ float:left;width:165px;height:60px; background:url(http://www.gxlcms.com) no-repeat 0 0} h1#logo a{...
对于背景属性background-image大家应该已经很熟悉了，在CSS2中与它相关的属性还有background-repeat（设置背景是否重复及重复的方式）、background-position（设置背景图片在容器中的位置）、background-attachment（设置背景是否随页面一起滚动），通过这些属性来控制背景图片在容器中如何显示，但我们也只能为容器提供一张背景图片，如果我们想让一个容器的背景用多张图片实现，那么我们该如何去做呢？再在容器里添加一些无用的元...
大家看到的html背景色渐变是通过CSS实现的，个人感觉还不错，可以清楚的看到图片 效果截图： 实现代码： 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startC...
在html中可以轻松实现背景色渐变的下面是一个通过CSS实现的示例，大家若感兴趣，可以参考下 效果截图： 实现代码： 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientTyp...
背景颜色 background-color 语法： background-color： 默认值：transparent 透明 适用于：所有元素 继承性：无 动画性：是 计算值：指定值 取值： ： 指定颜色。 说明： 设置或检索对象的背景颜色。 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 如果设置了 < background-image >，同时也建议设置 < background-color > 用于当背景图像不可见时保持与文本颜色有一定的对比度。 对应的脚本特性为back...
div背景透明样式： 样式代码： .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:center; padding:20px;} 使用方法：背景透明html代码：100素材网.alert {filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opac...
CSS背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。首先列举一下CSS中关于元素背景的所有属性并简要描述了其作用，其中后面几个属性是在CSS3中新加入的。属性 描述 备注background 简写属性，作用是将背景属性设置在一个声明中。background-color 设置元素背景颜色background-image 把图像设置为背景background-repeat 设置...
根据html代码的不同来分成两大类方法，如下 html代码： hello see 第一种方法：text-indent .replace-indent{height:200px;width:200px;background:url();text-indent:-9999px; } 第二种方法： .replace-indent{height:200px;width:200px; background:url();text-indent:100%;white-space:nowrap;overflow:hidden; } 第三种方法： .replace-indent{height:0px;width:200px;background:url();padding:200px 0 0 0;overflow:hidde...
在布局现在的网站首页的时候，发现一个问题。我使用了一张1440*900的png图片作为背景图片。页面内的Div使用了较多的百分比自适应框体大小，原body元素的CSS如下 html { width: 100%; height: 100%;}body { background: url(../img/bg.png) no-repeat; margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;} 背景图片为一张渐变图片，如果图片重复平铺的话将会非常难看，所以不做...
背景定位原点background-origin是CSS3新添加的有关背景的属性，主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个：border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。 一、background-origin的语法 1、background-origin的语法 background-origin: padding-box || border-box || content-box ...
实现鼠标经过背景变色的方法有很多，今天我们介绍的是用CSS+DIV实现的方法。 方法一 以下为引用的内容： #div:hover{background:#000000;} 解释:鼠标经过id为div的元素时背景变色 IE6.0、Firefox2.0、Opera 9.23都不行 方法二 以下为引用的内容： 方法三: 以下为引用的内容： .d_over{background-color:#307172;}.d_out{backgro...
以前看到很多大型网站，整个网站的背景图片，是同一张图片，下载他的背景图片，看到一张图片上有很多小图标。也就是国外很流行的css sprites，目前国内也有很多网站这样用。这次在写CSS+DIV时，也这样写了个整站，感觉虽然做网站的整站慢，但在网站的占用资源上，的确省了不少。 原理，一般网站的图片都是分开的，每个图片的调用都会占用一个IIS链接，而现在把所有图片放在一张图上时，所有图片都是一个图片，只要调用一次图片，...