css中的背景色渐变以及背景图的定位

单纯的背景色渐变：

background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd));
background: linear-gradient(to bottom, #fff 0px, #ddd 100%) repeat scroll 0% 0%;

可以同时支持谷歌、火狐浏览器，兼容性比较强。

背景图的位置：

background:url("images/taocan-bg.png") no-repeat -315px 0px;

background:url("images/taocan-bg.png") no-repeat -315px bottom;

这两个是有区别的，bottom有的时候不显示，而0px会显示。

时间： 2024-08-28 21:07:38

css中的背景色渐变以及背景图的定位的相关文章

CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动普通流相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

css中的段落样式及背景

CSS实现响应式全屏背景图

body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大

CSS设置DIV背景色渐变显示--针对不同浏览器，背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

CSS设置DIV背景色渐变显示

css中input输入框点击背景及边框变化

CSS不常用属性果然不用就想不起来啊. 记录一下做个备忘. 用:focus伪类就可以实现 input:focus { border: 2px solid yellow; }

CSS设置DIV背景色渐变

div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #AC07BD, #f6f6f8); /* IE 10 */ background:-moz-linear-

背景图的定位技巧

如果你想定位的位置是距离右边20px,距离底部10px,怎么办? 一.使用background-position的四个值语法例如:background-position: right 20px bottom 10px;/* ie7,ie8不支持 */ 二.使用 calc()比如:background-position: calc(100% - 20px) calc(100% - 10px); 注意:使用calc() 运算符号之间要有空格三.使用JavaScript如果希望能够兼容所有浏览器