零基础建站培训介绍

当前位置:

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组成的一个特殊文档,它存放在网络中某台服务器中,我们如果知道了这个文档的存放位置,然后在网页浏览器中输
  • ASP 声明变量ASP 声明变量用Dim来声明(或者说定义)变量,注意,所有变量都要声明,但可以写为同一行<%dim namename="Donald Duck&quo
  • 小白如何学习好java (7409 次浏览)
    对于新手小白来说,要想学好Java,应该注重以下几个方面:第一:正确理解Java的各种“抽象”。学习Java就是学习各种“抽象”,包括类、接口和抽象类等,
  • 丰富多样的网络工具和资源的出现,使网页设计变得轻松而简单。这里介绍 28 款在线工具和生成器,以帮助你更快捷方便地设计页面。1. Lorem Ipsum Gene
  • 初学者怎样学习网页制作呢?对于初学者,网站设计有一定难度,但是网页设计特别重要,在织梦仿站教程中也需要使用到网页设计。我们需要使用一些软件,
  • 微网页制作方法 (7137 次浏览)
    微网页是为适应高速发展的移动互联网市场环境,而开发封闭式的应用客户通过微信微博,等社会化的工具实现传播、转介绍、营销型微网页转化率高,由客服
  • 网页设计培训内容包括:PhotoshopCS6课程内容关键学习培训流行图象处理手机软件Photoshop的图象处理、编写、安全通道、涂层、相对路径综合性应用;图
  • 怎么制作网页 (6471 次浏览)
    网页是由HMTL和CSS组成的,通过HTML代码和CSS代码我们就可以制作出一个网页。下面介绍一下网页制作方法。打开DW网页编辑软件新建HTML有两种方法
  • 自适应网页制作方法 (6400 次浏览)
    自适应网页制作方法特别先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话,css中的像素单位px,是逻辑像素。不是设备的