资讯专栏INFORMATION COLUMN

css background-position和background-size以及clip属性

wua_wua2012 / 865人阅读

摘要:今天聊一聊背景属性的和以及三个属性。为默认值这个属性,是用来控制背景图片尺寸的。使用百分比与使用单位类似,是以父元素为基准。关键词顾名思义,这个属性会让背景图片完全覆盖元素空间。

今天聊一聊css背景属性的background-position和background-size以及clip三个属性。

background-position:(0%,0%)为默认值
这个属性,看它字面意思就知道啦,用来定位背景显示的位置。既然是定位,自然而然我们就想到了top和left,
对比于position属性,在这里我们可以用以下方式来使用background-position:

1、直接使用定位关键词如"right","center","top","left"等,形如background-
position:center left;如果只设置一个值,另一个值默认为center;

2、使用百分比,形如background-position:10% 20%;第一个值为水平值,第二个为垂直方向值如果只设置
 一个值,另一个值默认为50%;

3、使用px,em等其他css单位,与百分比使用类似。




background-size:auto为默认值
这个属性,是用来控制背景图片尺寸的。它也有几种用法:

1、直接使用css单位如px,rem等,形如:background-size:10px 20px;第一个数值用来确定宽度,第二个
值用来确定高度。

2、使用百分比与使用单位类似,是以父元素为基准。

3、关键词cover,background-size:cover;顾名思义,这个属性会让背景图片完全覆盖元素空间。我们可以
这样理解,将一张图片等比例放大,直到这张图片能够完全将元素空间完全覆盖时,就是此时cover定义的背景
尺寸了。

4、关键词contain,background-size:contain;contain属性与cover不同,仍然是等比例拉大背景图片
但是,contain属性是在图片的宽度或者高度其中之一和元素的宽度和高度一致时,此时的尺寸就是背景的尺寸
也就是说,图片会被放大到容器能够完全显示它的最大尺寸。




最后,我们来看一个用clip属性搭配js脚本实现的效果:

我们看到图片中的导航条,文化二字被“切割”了,一部分是黑色,一部分是白色。这是怎么做到的呢?诀窍在于
使用clip属性,clip用来裁剪绝对定位元素,被切掉的部分类似于overflow:hidden,也就是说在页面上是
看不见的。这个效果,其实用了两个一样的导航重叠在一起,然后通过js脚本根据滚动来实时设置clip属性的值
nav1裁剪掉下部分,nav2裁剪掉上部分,这样看来就实现了图片的效果。

由于文字描述比较难懂,这里贴出有图中效果的某网址,供各位参考~~
点击这里:http://www.sketchin.ch/en/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111489.html

相关文章

  • 关于CSS中的背景属性background简述

    摘要:属性控制背景图片在被属性改变了大小及被属性定位后如何平铺。可用于此属性的关键字为和。对于长度和百分比,我们也可以指定沿轴和轴的位置。属性指定背景图片应根据盒模型的哪个区域进行定位。最后,属性是其他背景相关属性的简写。 像我之前提到的那样,文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层,背景层可以是完全透明或者其它颜色,也可以是一张图片。此背景层由8个CSS属性(加上1个简写...

    tomorrowwu 评论0 收藏0
  • 关于CSS中的背景属性background简述

    摘要:属性控制背景图片在被属性改变了大小及被属性定位后如何平铺。可用于此属性的关键字为和。对于长度和百分比,我们也可以指定沿轴和轴的位置。属性指定背景图片应根据盒模型的哪个区域进行定位。最后,属性是其他背景相关属性的简写。 像我之前提到的那样,文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层,背景层可以是完全透明或者其它颜色,也可以是一张图片。此背景层由8个CSS属性(加上1个简写...

    tianren124 评论0 收藏0
  • [实践总结]纯css实现动态边框

    摘要:另外一种实现思路是添加四个来分别实现上下左右的边框效果,虽然可行,但是要添加四个额外元素,有点儿得不偿失的感觉。背景 这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);动态边框 思路 看到这个效果,我首先想...

    BlackHole1 评论0 收藏0
  • 前端面试之CSS3新特性

    摘要:和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型,即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中,新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。 除了html5的新特性,CSS3的新特性也是面试中经常被问到的。 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。 element1~...

    glumes 评论0 收藏0
  • css揭秘》读书笔记

    摘要:但是根据本司机两年的开发经验来看,在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧,我就不一一列举了,建议自读。很好很实用的一本书。 第一章 引言 css编码技巧 在引言中,作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看,在实际开发中很少来使用em这个单位。如何用以及何时去使用,还是要根据实际开发需求来定吧,毕竟这两个属性...

    xiguadada 评论0 收藏0

发表评论

0条评论

wua_wua2012

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<