第4章 css3背景

background-position 属性

有三种表示方法:

1. x% y%
  第一个值是水平位置,第二个值是垂直位置。如果您仅规定了一个值,另一个值将是 50%。
2. xpos ypos
  第一个值是水平位置,第二个值是垂直位置。
3. 方位词

总是以元素左上角为坐标原点对背景图片进行定位(padding-box,padding的边缘)

background-origin 属性

background-attachment设置为fixed,background-origin将不起任何作用

background-size属性

若取值百分数,则是按相对于元素的宽度来进行计算,如

div{
    width:320px;
    height:270px;
    background:url() no-repeat;
    background-size:50% 80%;
}

背景图片的尺寸宽度为(320 * 50)%px,高度为(270 * 80%)px

时间: 2024-10-10 22:00:08

第4章 css3背景的相关文章

《图解CSS3——第4章 CSS3背景-1》

CSS3背景 4.1 CSS3背景属性简介 background是一个使用率很高的属性,也是一个十分有用的属性,能帮助设计师实现一些特殊的效果,使用起来也非常简单. 4.1.1 背景的基本属性 背景主要包括五个属性: background-color(背景颜色) background-image(背景图片) background-repeat(背景图片展示方式) background-attachment(背景图片是固定还是滚动) background-position(背景图片位置) 可以单独

《图解CSS3——第4章 CSS3背景-2》

4.2 CSS3 背景原点属性 4.2.1 background-origin 属性的语法及参数 background-origin属性主要就是用来决定 background-position属性的参考原点,即决定背景图片定位的起点.在默认情况下,背景图片的background-position属性总是以元素左上角的坐标原点对背景图片进行背景定位.CSS3的background-origin属性将打破这一格局,可以根据自己的需要来改变背景图片的background-position起始位置. 语

第 21 章 CSS3 文本效果

学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 CSS3 提供了 text-shadow 文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. text-shadow Opera Firefox Chrome IE Safari 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:1.text-shadow 在 CSS2 的时

第 22 章 CSS3 渐变效果

学习要点: 1.线性渐变 2.径向渐变 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变. 一.线性渐变 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能.在以前,这种效果必须采用图片才能实现的.首先,我们先看一下它的样式表,如下: linear-gradient(方位, 起始色, 末尾色) 方位 可选参数,渐变的方位.可以使用的值有:to top.to top right.to right.to

第25章 CSS3过渡效果

第 25章 CSS3过渡效果学习要点:1.过渡简介2.transition-property3.transition-duration4.transition-timing-function5.transition-delay6.简写和版本 CSS3的过渡效果,通过这个功能可以不借助 JavaScript来实现简单的用户交互功能. 一.过渡简介过渡效果一般是通过一些简单的 CSS动作触发平滑过渡功能,比如::hover.:focus.:active.:checked等.CSS3提供了 trans

第七十九,CSS3背景渐变效果

CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能.在以前,这种效果必须采用图片才能实现的.首先,我们先看一下它的样式表,如下: linear-gradient(方位,起始色,末尾色)                  方位          可选参数,

学习笔记 第十一章 CSS3布局基础

第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形的盒子(Box),根据盒模型规则,网页中所有元素对象都被放在一个盒子里,设计师可以通过CSS来控制这个盒子的显示方式. 11.1.1 盒模型结构 Box具有如下特点: 每个盒子都有:边界.边框.填充.内容4个属性. 每个属性都包括4个部分:上.右.下.左.属性的四部分可以同时设置,也可以分别设置.

css3背景颜色渐变属性

https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的详细解释. 在项目中,有很多地方都用到了背景线性渐变.如果在移动端还可以适当使用CSS3这个属性 css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #f

第24章 CSS3变形效果(上)

第 24章 CSS3变形效果[上]学习要点:1.transform2.transform-origin3.浏览器版本 本章主要探讨 HTML5中 CSS3的变形效果,通过变形效果,可以平移.缩放和旋转元素的功能. 一.transformCSS3提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能.属性有两个:transform和 transform-origin.属性 说明transform 指定应用的变换功能transform-origin 指定变换的起点 对于 transf