关闭

HTML5+CSS3-第五节(边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转)

954人阅读 评论(0) 收藏 举报

边框背景图片

1、  background-origin设置背景图片的起始原点

background-origin:border-box;------背景图片从边框开始显示

background-origin:padding-bax;-----背景图片从内边距开始显示(默认)

background-orign:content-box;------背景图片从内容区域开始显示


例子:

 

.div1{

width:500px;

height:300px;

border:30px solidred;

background:url(nimg269_1.jpg)no-repeat;

background-origin:border-box;

}

 

2、  background-clip将背景图片做适当的裁剪以适应实际需要

background- clip:border-box;------背景图片从边框开始向外裁剪背景

background- clip:padding-bax;-----背景图片从内边距开始向外裁剪背景

background- clip:content-box;------背景图片从内容区域开始向外裁剪背景

background-clip:no-clip;------表示不裁切

 

多背景图

1、  多个背景:(中间用逗号隔开)

语法:

Background:url(图像位置) 重复方式, url(图像位置1) 依附方式1, url(图像位置3) 依附方式3…………………..

2、  Background-size:------------图像大小

大小分为:像素--

                   百分比

                   Cover------覆盖,以最小边等比例缩放

                   Contain-------包含,----以最长边等比例缩放

注意:像素和百分比的缺点:图片变形

         Cover和contain的缺点:图片超出范围或者显示不全

 

加上之前的:简写为:

Background:背景颜色 图片路径 重复方式 依附方式 位置/图像大小;

注意:位置/图像大小,这两个不可以互换

 

CSS选择器

1、  关系选择器:

(1)      包含选择器

例子:.div1 p{}----指的是div1下的所有p元素

(2)      子选择器

例子:.div1>p{}------指的是div1下的子元素p

(3)      相邻选择器

例子:.div1+p{}------div1下面相邻的p元素(一条)

(4)      兄弟选择器

例子:.div1~p{}----- div1下的所有p元素

2、  伪类选择器

(1)      结构性伪类选择器

(2)      UI元素状态伪类选择器

3、  属性选择器

4、  伪对象选择器

 

开放的网络字体类型

语法:

@font-face{

         Font-family:字体名称;

         Src:url(字体文件路径);

}

 

边框背景图片

语法:

border-image:url(文件路径) 上边框切片的大小 右边框切片的大小 下边框切片的大小 左边框切片的大小repeat streatch;

分开写:

         border-image-repeat:stretch;-----拉伸;

         border-image-repeat:repeat;-----重复;

border-image-repeat:round;-----平铺;

例子:

.div4{

         margin-top:200px;

         width:400px;

         height:400px;

         background-color:darkred;

         border:20pxsolid pink;

         border-image:url(border.jpg)70 70 70 70 stretch round ;

         }

 

注意:其中大小,不加px。并且不加谷歌的私有前缀,加上之后边框中间会平铺图片中间的图

 

媒体查询

1、  过渡----加私有前缀

Transition:width 2s,height 2s,background2s;

如果时间都一样,则用:

Transition:all 2s;

例子:

.div1{

         width:200px;

         height:100px;

         background-color:blue;

         border:1pxsolid black;

         -webkit-transition:width2s, height 3s,background 2s;

         -moz-transition:width2s, height 3s,background 2s;

         }

2、  放大

Transform:scale(0.5,2);--------0.5为x轴,2为y轴(大于1的为放大,小于1 的为缩小)

3、  旋转

Transform-origin:left top;------------旋转的起始点,可以为像素,中心点为center

transform:rotate(60deg);----------旋转的度数,正数为顺时针;负数为逆时针

 

例子:实现一个正方形,鼠标经过5s之后成为一个圆

代码:

.div5{

         width:200px;

         height:200px;

         background-color:red;

         border:1pxsolid black;

         margin:100px0px;

        

         }

.div5:hover{

         -webkit-transition:all5s;---------过渡时间

         -webkit-transform:rotate(750deg);---------旋转

         border-radius:100px;

         }

0
0
查看评论

【CSS】背景图套路一:用border-image做背景图

未经允许,不得转载。 需求背景:如何用css来制作这样的一张优惠券?尤其是金棕色的齿轮:(设计稿宽高为690px * 210px) 我想到的最直接快速的方法就是用background的URL来设置:直接把下面整个图片作为元素的背景,搞定!(宽高为690px * 210px,注意四边有1px...
  • LZGS_4
  • LZGS_4
  • 2017-08-24 20:22
  • 487

css使背景图片旋转

因为遇到问题所以去查找问题,css3
  • ccf199201261
  • ccf199201261
  • 2014-05-02 11:10
  • 4359

CSS添加多个背景图片

CSS添加多个背景图片           如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性。           因此,只有给多个标记添加不同背景来实...
  • nangeali
  • nangeali
  • 2016-09-30 17:55
  • 1504

css3 设置背景图片大小(缩略图形式缩小)

废话当然不说了。直接上代码 #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; background-repeat:no-repeat; border-radius: 4px; bor...
  • youmypig
  • youmypig
  • 2015-06-12 10:36
  • 5900

关于CSS中,引入背景图片和border的一点总结

1. CSS中,引入背景图片要使用url();方法,括号里面是图片的相对路径或者绝对路径。                             ...
  • ZxxSteven
  • ZxxSteven
  • 2016-12-30 21:47
  • 351

鼠标移入背景图片放大(还原)

我拷贝的代码位置;搬过来的希望能帮到大家
  • qq_32091599
  • qq_32091599
  • 2016-12-23 23:30
  • 1768

css 网站大背景(按比例缩放背景图片)

很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法。1.帅气简单的CSS3方法html { background: url(images/bg.jpg) no-repeat center cen...
  • qilixiang012
  • qilixiang012
  • 2015-07-27 17:49
  • 2277

CSS3中在一个元素中显示多个背景图像

在CSS3中可以在一个元素中显示多个背景图像,还可以将多个背景图像进行重叠显示,从而使得调整背景图像中所使用的素材变得更加容易。 如在一个div元素显示多个背景图像,代码如下: div{     background:url(flower-red.png),  ...
  • u013063153
  • u013063153
  • 2016-09-03 21:24
  • 1665

CSS3字体示例,背景图,变形基点等。。。

指定自动换行的处理方法         #div1{             word-break:keep-all;           ...
  • lamenw
  • lamenw
  • 2017-04-05 16:30
  • 431

【前端】CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; lin...
  • hj7jay
  • hj7jay
  • 2017-06-20 09:57
  • 3378
    个人资料
    • 访问:89241次
    • 积分:1814
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条