零基础建站培训介绍

当前位置:

CSS怎么控制背景图片位置、滚动、透明度

CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)

控制背景图片位置:

background-position:水平方向,竖直方向。

控制背景图片滚动:

Background-attachment:背景的滚动。属性设置背景图像是否固定或者随着页面的其余部分滚动。


body{ background-image: url(bgimage.gif); background-attachment: fixed; }

控制背景图片透明度:

transparent:背景的透明 (相关应用:css设置半透明背景

控制背景图片变形


Li:hover dt{ -moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-webkit-transition: all ease-in-out .5s;-moz-transition: all ease-in-out .5s;}rotate转动div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari、Chrome */
-o-transform:rotate(7deg); /* Opera */
}

控制背景图片过渡,转换。把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:


div{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 -webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

背景属性的设置顺序:

背景属性:背景颜色 背景图片 背景是否重复 背景时候随浏览器滚动 背景平位置 背景垂直位置

background : background-color || background-image || background-repeat || background-attachment || background-positiontransparent

表示透明无颜色none 表示没有设置背景图片repeat 表示图片重复scroll 表示背景图片随浏览器下拉而滚动0%水平位置在x00%垂直位置在y0

HTML的其它背景属性

描述 测试
none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。 测试
translateY(y) 定义转换,只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试
上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • 学习html有什么用 (118605 次学习)
    在学习建网站过程中,需要对HTML进行学习,网站的网页就是由大量的HTML代码组成。对于我们学做网站的学员来说,如果你要编辑网页,当然是需要学习HTML
  • html元素标签属性大全 (114875 次学习)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • HTML <font>标签之html文字字体、html字体颜色、html字体大小设置标签元素一、font标签语法与结构<font color="#FF0000">w
  • HTML和XHTML有什么区别 (11433 次学习)
    HTML和XHTML的区别体现在功能上bai和书写du习惯两大方面。1.功能上(1)HTML对于各大zhi浏览器兼容性较dao差(pc端浏览器、手机端浏览器、PAD),对
  • 问:我想建一个小说网站,但我只会HTML,我能够用HTML做一个小说网站吗?这个小说网站的后台更新怎么实现?答:单纯的HTML很难去建一个小说网站,HTM
  • 在学习如何做网站时,网站中会有图片,图片使用HTML img 图片标签,img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据
  • HTML段落标签 P标签 (114843 次学习)
  • html H标题标签?W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递减。