背景裁剪图片html,HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）...
1.背景定位：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-image: url("img/lzx.JPEG");
background-repeat: no-repeat;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid red;
border-right: 30px solid red;
padding: 50px;
/*
background-origin: padding-box|border-box|content-box;
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
*/
background-origin: border-box;
/*background-origin: content-box;*/
background-position: -50px 0;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
效果图：
2.背景裁剪：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 100px;
height: 100px;
background-image: url("img/lzx.JPEG");
background-repeat: no-repeat;
border: 30px solid transparent;
padding: 50px;
/*
background-clip: border-box|padding-box|content-box;
border-box背景被裁剪到边框盒。
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。
*/
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
效果图：
3.文本裁剪：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 800px;
height: 100px;
background-color: orange;
/*该属性是webkit内核，blink内核浏览器特有属性，其他浏览器不支持*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url("img/lzx.JPEG");
font-size: 72px;
font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
背景裁剪图片html,HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）...相关推荐
- 下载页面的css样式文件引用的背景图片
在加载网页的时候,一般会缓存该网页使用的图片资源. 我们在页面的Sources目录下是能够找网所使用的样式和图片等资源. 那么如何下载某网站中我们需要的图片? 使用360浏览器,使用F12功能,选中网 ...
- CSS图片有时失败,科技常识：图片加载失败后CSS样式处理最佳实践
今天小编跟大家讲解下有关图片加载失败后CSS样式处理最佳实践 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关图片加载失败后CSS样式处理最佳实践 的相关资料,希望小伙伴们看了有所帮助. 一 ...
- 图片加载失败后CSS样式处理最佳实践
图片加载失败后CSS样式处理最佳实践 1.传统的图片异常处理 如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的"裂开"的图片效果,如果设置了 alt 属性 ...
- （MC嘉）jQuery基础使用与样式篇
jQuery基础使用与样式篇 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- css怎么调整输入框的大小,CSS样式控制文本输入框大小
CSS样式控制文本输入框大小 (2013-09-04 10:56:15) 标签: 文本输入框 大小 拖动 禁止拖动 textarea it HTML 标签 textarea 在大部分浏览器中只要指定行 ...
- html图片如何摆在右侧,css里面，怎么让背景图片在最右边，且上下...
2016-07-08 00:39连亚玉 客户经理 水平居中: 1.单独文字垂直居中只需要设置CSS样式line-height属性即可. 2.文字与图片同排,在设置div高度同时再对此css样式的图片& ...
- java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
- 裁剪图片的同时将xml标注文件里的真实框裁剪，使得他们一一对应
裁剪策略: 从左至右,从上至下滑动裁剪320x320大小的子图,滑动步长为160,当最右边超出边界,以边界为边,向左裁剪320:最下端超出边界部分也是这样处理. xml文件格式是Pascal VOC格 ...
- jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
最新文章
- 让seo效果起死回生的妙招
- stm32无法进入串口接收中断
- 深入理解 Java 虚拟机 学习笔记
- CDH集群调优：内存、Vcores和DRF
- android扩散波动动画,使用WebGL制作图片的像素脉冲波（粒子化扩散波动）动画特效...
- java学习（119）：set类
- 【vue开发】 父组件传值给子组件时 ,watch props 监听不到解决方案
- Java面向对象之多态解析、final关键字
- windows03系统安装08sql数据库
- prerenderspaplugin可以抓取动态数据吗_RPA编程思路之数据抓取
- 【STM32学习笔记】（10）——蜂鸣器实验详解
- 最小二乘法原理-线性回归
- java nas_NAS对家庭来说有什么用处？
- 三次改变世界、却被无情出局的程序员
- 量子计算机、奥数AI……这是2020计算机、数学的重大突破
- 一个后端朋友面试一个月的经验总结
- kinectfusion的详细介绍
- V4L2视频驱动框架---meida_device管理模块简述
- 解决报错：soundfile.LibsndfileError: Error opening ‘.wav‘: File contains data in an unknown format.
- 新华三“大”结盟 合力推进智慧交通产业升级