css3裁剪背景图

background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

1 background-clip:border-box;/* 表示从边框向外裁剪背景，border-box是background-clip的默认值 */
2 background-clip:padding-box;/* 表示从内填充（padding）向外裁剪背景 */
3 background-clip:content-box;/* 表示从内容区域向外裁剪背景 */
4 background-clip:no-clip;/* 表示不裁剪 */

效果：

时间： 2024-10-25 20:05:18

css3裁剪背景图的相关文章

关于c3背景图background-origin和backgroud-clip属性的梳理

background-origin属性规定背景图的定位区域,有三个值: border-box:背景图从外边框的左上角开始,即包括边框部分: padding-box:背景图从内边距的左上角开始,即不包括上和左边框部分,图片足够大会包括右和下边框部分: content-box:背景图从内容框的左上角开始: background-clip:可以理解为图片裁剪后的显示区域,有四个值 border-box:从内边距的左上角开始裁剪背景图 padding-box:将背景图位于边框内的部分裁剪掉 conten

如何使用 css3 transform 属性来变换背景图？

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

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

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

#css3# 可以多背景图设置

今天无意发现css3可以多背景图设置,省去了多添加标签或伪类来创造,gooood,真是越来越智能,要紧跟是带你啊. #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } 前面url的图片会在上面层. 原文地址:https://www.cnblogs.co

css3 -- 背景图处理

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

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("[email protected]"); background-size:210

CSS3的背景background

一.设置背景色:background-color background-color: transparent || <color> background-color其主要用来设置元素的背景颜色,其默认值为transparent(不设置任何颜色情况下是透明色),<color>用来设置背景色彩,常用的颜色格式为:颜色名:如"red":rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%):hls值hsl(0, 100%, 50%),二进制值

一个动态小导航栏(好看的，用C3)（不依赖js，点击小图切换大的背景图）

<!DOCTYPE HTML><htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> @importurl("ht

CSS3之背景 background-size background-origin background-clip

[一]background-size 规定背景图像的尺寸以像素规定尺寸 div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } 以百分比规定尺寸(尺寸相对于父元素的宽度和高度) div { background:url(bg_flower.gif); -m