零基础建站培训介绍

当前位置:

CSS3中新增的背景属性(如何设置多个背景图片)

    • 新增背景属性
      • background-clip
      • background-origin
      • background-size
    • CSS常用背景属性
      • background-repeat
      • background-image
    • 边框样式
      • border-radius
      • border-image

新增背景属性:

background-clip

指定显示背景的范围

属性值:
border-box:边框以内的背景,包括边框(默认)
padding-box:padding以内的背景,包括padding
content-box:content以内的背景,包括content


background-origin:

开始显示的位置,一般是以图片为背景的时候使用

属性值:
border-box:从边框开始显示
padding-box:从padding开始显示
content-box: 从content开始显示


background-size:

设置背景图像的宽度和高度

属性值:
auto:保持原高度和宽度
length:后面可以跟两个数值,分别是宽度和高度,若只写一个数值,则高度自适应
percentage:后面可以跟两个数值,分别是宽度和高度(百分比),若只写一个数值,则高度自适应
cover:扩大至充满容器,一般适用于比容器小的图片
contain:缩小至充满容器,一般适用于比容器大的图片

 

background-position

属性设置背景图像的起始位置。


background-position:center;

CSS常用背景属性:

background-repeat:

图片重复

background-image:

一个元素可以设置一张或多张背景图片

写法:


background-image: url(123.jpg”),url(124.jpg”),url(125.jpg”);

添加多张图片时可叠加,第一张在最上面依次往下


边框样式:

border-radius

属性介绍:
①后面跟两个值的时候,第一个表示左上与右下的角度,第二个表示右上与左下的角度
②一个值的时候,是所有角的角度

③也可以分别设置左上左下右上右下的属性
例如左上的属性为:
border-top-left-radius

border-image

图像边框(类似于切割图片)

写法:


border-image: url("../image/123.jpg") 100;
border-image: url("../image/123.jpg") 100 100 100 100;

上边两行代码是等价的

第二行代码后面的四个数字分别上,右,下,左的边距


border-image: url("../image/123.jpg") 100/100px repeat repeat;

“/”后的三个参数分别是border的宽度,上和下图片填充的方式,左和右图片填充的方式。repeat平铺,stretch拉伸(默认样式),round也是平铺,不同的是如果最后一张图片没有完全显示则不显示,而是把之前的图像扩大

上一课: 下一课:

发表评论

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

相关教程

  • overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可
  • 1、CSS3设置文字一个阴影在CSS3中使用text-shadow属性来给文字添加阴影效果h1{text-shadow: 5px 5px 5px #FF0000;}语法解释:
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • 在网页制作和网站开发过程中,网页上使用的字体往往由于浏览者电脑中没有相应的字体,达不到我们设计的效果。为了解决这个问题,我们可以直接使用我们
  • CSS3常用属性手册 (144196 次学习)
    CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html  CSS3中的transform 变形功能:transform:rotate():旋转  t
  • 特效介绍:响应式12列CSS网格样式代码是一款网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的class名称。特效截图:特效适用:适用
  • css font-style字体斜体样式来定义字体倾斜效果,所有主流浏览器都支持font-style属性,本文章向大家介绍css如何设置font-style字体斜体样式的方法和使
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • 在CSS中可以控制DIV的边框产生阴影效果,达到立体感.也可以给图片添加阴影,使整个网站版面更加美观.CSS设置阴影效果的样式为box-shadow属性,使用方法:
  • 很多网站都有一个很大的问题,在这个浏览器上显示正常,但在其它浏览器显示却错位。这就是网站浏览器不兼容。如果你在自己建网站时也遇到了不同浏览