css3 裁剪背景图左边100px

2024-08-08

利用CSS3 clip-path裁剪各种图形。

'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过它来绘制多边形. 先来裁剪一个三角形. 代码如下: <style> div{ width:100px; height:100px; background-color:red; -webkit-clip-path:polygon(50% 0px,100% 100%,0px 100%); } <

css3的新属性新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

css31==>颜色的6种表示的方法有6种表示颜色的方法关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%--100%: l-->亮度(0%--100%): a-->透明度(0 表示完全透明,1表示完全不透明) 2==>透明度 opacity一个元素的 opacity属性会完全的应用在这个元素的本身和它的子孙上, opacity的值在0--1:0表示完全的透明(看不见) 兼容所有的浏览 img{f

css3 -- 背景图处理

1.多背景图片: p{ background-image:url() , url(); background-position:95% 90% , 50% 50%; background-repect: no-repect; } background-repect只有唯一的一个值,如果一个属性的值数量比其背景数量少,这样这些值就会被重复 background-color是唯一一个不接受多个值得元素,颜色层会一直堆放在图片层下方 p{ background: url()no-repect 95%

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

利用css3的多背景图属性实现幻灯片切换效果

css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css代码,就给.box元素添加了三张背景图,而正因为有了这样一个功能,我们可以利用不停的变换这三张背景图的位置来实现幻灯片切换的效果. html代码非常精简,如下: <body> <div class="box"> </div> </body>

css3 背景图动画一

一实现背景图循环播放 @keyframes mlfly { 0%{ background-position:0 0; } 100%{ background-position:210px 0; } } .ele-man{ width:70px; position:absolute; top: 30px; left:50%; margin-left:-35px; background-image: url("m1-man.32@2x.png"); background-size:210p

background 的一些小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点是 border的外边缘 http://www.w3cplus.com/content/css-background-origin 背景图片:定位的起点是 padding的外边缘处: 这是因为: background-origin 指定背景图像的定位区域

CSS3的背景background

CSS3中的Background属性 background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color 也可以分解写成: background-image: url(); background-position: <l

关于css3的背景切割（background-clip）、背景原点（background-origin）的使用

一.背景切割 background-clip :border-box | padding-box | content-box 作用:为将背景图片做适当的裁剪,以适应需要. 默认格式 background-clip :border-box,border的区域也有背景图,但是背景图图片是从border-top和border-left的位置开始平铺的,所以当背景图片no-repeat的时候,border-top和border-left的背景是背景色不是背景图,只有当背景repeat的时候,

在css中设置图片的背景图，怎么设置图片纵向拉伸

css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景. css3出现以后,可以用background-size 属性来实现背景图拉伸填充. 而且这个属性在firefox,chrome,以及ie9上都可

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

JS编写背景图切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图切换</title> <style type="text/css"> #wrap{ width: 300px;height: 225px; margin: 100px au

html-css控制背景图全屏拉伸不重复显示

在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); background-size: 100%; background-position:center; } 但是background-siz是CSS 3的属性,并不是所有的浏览器都支持. CSS2中并没有图片全屏拉伸的属性,只能想其他办法. 利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背

CSS3之背景剪裁Background-clip

CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这五个属性值为大家介绍CSS3之背景剪裁Background-clip. 一.Background-clip的语法 1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip ||

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/ski

background-size做自适应的背景图

background-size做自适应的背景图在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一部分我们只能看见一部分的背景图在元素内显示! 如图所示这是我的背景图我有一个div要加入这张背景图结果发现显示的结果和设计需要的效果完全不一样. div{ width: 400px; height: 200px; border: 1px solid red; background: url(2.j

【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容

最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想想还是记录下来比较好,做个总结. 知识要点: CSS3的rgba()浏览器兼容 rgba()颜色值目前得到以下浏览器的支持:IE9+.Firefox3+.Chrome.Safari以及Opera10+ rgba颜色值是rgb颜色值的一个扩展,增加一个alpha,它规定了对象的透明度 rgba()颜色

img标签实现和背景图一样的显示效果——object-fit和object-positon

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果.即如下图:只显示图片中间部分(红框部分) 下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果,首先我们本次讨论中用到的两张图片的原图就是上面的两张图片(一张宽度大于高度,另一张高度大于宽度) 1.背景图显示正方形效果的做法首先还是从背景图的做法说起,遇到类似的问题,我们大

20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size || /line-height || font-family 2.字体分样式字体倾斜:font-style:"normal | italic | oblique": 小型大写字母:font-variant:"normal | small-caps | inherit"

css 背景(background)属性、背景图定位

background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: (1)background-color 设置背景颜色 (2)background-image 设置背景图片地址 (3)background-repeat 设置背景图片如何重复平铺 (4)background-position 设置背景图片的位置 (5)background-attachment 设

css3 裁剪背景图左边100px

热门专题