背景裁切

古城微笑少年丶 2021-09-20 14:18 297阅读 0赞

*{
                padding: 0;
                margin: 0;
            }
            /*提升移动端响应区域的大小*/
            a{
                width: 50px;
                height: 50px;
                display: block;
                background-color: #ddd;
                margin:100px auto;
                box-sizing: border-box;
                
                background-image: url("../images/sprites.png");
                /*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
                background-position: -20px 0;
    
                /*添加padding*/
                padding:14px;
                /*设置背景坐标的原点
                border-box:从border的位置开始填充背景，会与border重叠
                padding-box:从padding的位置开始填充背景，会与padding重叠
                content-box:从内容的位置开始填充背景*/
                background-origin: content-box;
                /*设置内容的裁切:设置的是裁切，控制的是显示
                border-box:其实是显示border及以内的内容
                padding-box:其实是显示padding及以内的内容
                content-box:其实是显示content及以内的内容*/
                background-clip: content-box;
            }

转载于:https://www.cnblogs.com/tuziling/p/10106822.html

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习经验总结（头像前裁切后上传）

1.需要的部分引用： ![20200929114250451.png][] resurl后台传来的头像图片 2.封装组件部分： html: <div id="

本是古典何须时尚/ 2022年12月11日 07:47/ 0 赞/ 115 阅读

相关使用canvas对图片进行裁切

canvas canvas 又叫做画布，是 HTML5 新增内容，可以使用js脚本在其中绘制图像的元素。常用于制作网页上的一些毕竟炫酷的前端特效。可以完成图片

青旅半醒/ 2022年10月05日 00:41/ 0 赞/ 153 阅读

相关 Node 裁切图片的方法

1、安装 jimp $ npm install --save jimp 2、读取本地图片切图 jimp.read('本地图

系统管理员/ 2022年09月16日 00:29/ 0 赞/ 170 阅读

相关在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用

在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用：cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库

分手后的思念是犯贱/ 2022年06月05日 04:53/ 0 赞/ 291 阅读

相关 angular 获取上一个路由地址获取当前页地址地址裁切

获取当前页地址例如：url：http://localhost:9096/OA\_Web/main.html\/workSheet/calender\_leaderDe

一时失言乱红尘/ 2022年05月24日 07:52/ 0 赞/ 1029 阅读

相关图像裁切

vue单独适配的版本vue-cropperjs，不过他在安卓上略有卡顿 AlloyCrop功能虽少，但是不卡 vue-cropperjs地址： [https://githu

谁借莪１个温暖的怀抱￠/ 2022年05月20日 01:37/ 0 赞/ 166 阅读

相关 laravel图片上传，但是图片较大我们进行裁切处理

先说一下裁切扩展安装扩展包 1. Composer 安装 $ composer require intervention/image 1. 配置

柔光的暖阳◎/ 2022年03月31日 12:56/ 0 赞/ 333 阅读

相关 cesium之平面裁切

3D Tiles裁切简单案例：创造一个通过模型中心点的法线向下的裁切平面，如图所示：黄色部位为被裁剪的部位。 ![在这里插入图片描述][watermark_type_

刺骨的言语ヽ痛彻心扉/ 2022年03月14日 10:24/ 0 赞/ 568 阅读

相关 JS实现从照片中裁切自已的肖像

代码如下: <HTML xmlns:v> <BODY> <style> \tbHole td\{background:white;filter:alpha(opacity=

﹏ヽ暗。殇╰゛Y/ 2021年11月11日 23:32/ 0 赞/ 283 阅读

相关背景裁切

{ padding: 0; margin: 0; } /

古城微笑少年丶/ 2021年09月20日 14:18/ 0 赞/ 298 阅读