background: inherit制作倒影、单行居中两行居左超过两行省略

最新推荐文章于 2023-11-02 00:27:17 发布
最新推荐文章于 2023-11-02 00:27:17 发布
阅读量956 收藏
点赞数
原文链接：http://www.cnblogs.com/goloving/p/10309085.html
版权
本文介绍了如何使用CSS的`-webkit-box-reflect`属性创建倒影，以及利用`inherit`实现背景图片的动态继承。此外，还讲解了如何实现单行文本居中、两行文本居左以及超过两行文本的省略效果，涉及`-webkit-line-clamp`等CSS属性的应用。
摘要由CSDN通过智能技术生成

1、background: inherit;制作倒影

　　方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化，div 大小怎么变化，我们都不用去改我们的代码。

　　-webkit-box-reflect

　　这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。

　　box-reflect 有四个方向可以选，below | above | left | right 代表下上左右，更具体的可以看看 MDN 。

　　不过兼容性过于惨淡，基本上是只有 -webkit- 内核的浏览器才支持。

　　inherit，使用继承

最低0.47元/天 解锁文章
weixin_30810239
关注
background 旋转_css3 3D旋转相册带倒影的功能实现
weixin_42515781的博客
12-15 226
涉及知识点：1.定位 position: relative;（相对定位） position: absolute;（绝对定位）2.旋转 transform: rotateX()； rotateY()； rotateZ()； 单位deg ，顺时针为正值，逆时针为负值3.位移 transform: translateX(); translateY(); translateZ(); 单位px， 顺...
从倒影说起，谈谈 CSS 继承 inherit（转）
weixin_30664051的博客
10-13 148
从倒影说起，谈谈 CSS 继承inherit 给定一张有如下背景图的 div： 制作如下的倒影效果： 方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化，div大小怎么变化，我们都不用去改我们的代码。 法一：-webkit-box-reflect 这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡： ...
CSS3----图片倒影效果
Damys
05-15 7053
CSS: Html:
CSS 第005 背景-理论
ml_YSY的博客
11-09 411
背景属性：background CSS 背景属性用于定义HTML元素的背景。 背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是： 值 说明 background-color 指定要使用的背景颜色 background-position 指定背景图像的位置 background-size 指定背景图片的大小 background-repeat 指定如何重复背景图像 background-origin 指定背景图像的定位区域 .
关于background-size各个参数详解
JED'S BLOG
02-23 1万+
今天公司的要做一个名叫梦幻恋舞的webapp，在设置背景图的时候，明明已经把整个区域的高宽设置成100%了，但是背景图总不能全覆盖整个网页。考虑使用background-size这个属性，在用的时候发现background-size还有好多值，这边特地找一下学习一下。 属性名: background-size 属性值: * 其中 bg-size = [ |
深入理解CSS的height:100%和height:inherit之间的使用区别
01-19
inherit确实是个好东西，不仅节约代码，尤其与background之流打交道；而且还利于维护。 注意，如果想要继承background的图片，不能这样缩写，会显得很天真： CSS Code复制内容到剪贴板 background: #fff inherit...
HTML怎么建立两行四列的li,关于CSS如何实现多行多列布局的方法
weixin_32866779的博客
06-07 3148
这篇文章主要介绍了CSS实现多行多列的布局的实例代码,需要的朋友可以参考下1.两列多行：HTML:box1:实现两列多行布局111222333CSS:.box1 {width: 500px;background: #EEEEEE;}.box1 ul {clear: both;overflow: hidden;}.box1 ul li {width: 48%;height: 100px;margin...
css 中的background:transparent到底是什么意思有什么作用
09-25
如果一个父元素的background属性是继承的（即background:inherit），而在子元素中需要清除继承的背景，那么可以使用background:transparent来确保子元素背景透明，不会继承父元素的背景属性。 4. 跨浏览器兼容性...
用css写背景模糊的三种情况
最新发布
weixin_73529240的博客
11-02 1万+
今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。
怎么让微信头像做模糊背景
weixin_61728046的博客
10-18 787
怎么让微信头像做模糊背景
background简写属性的书写顺序，以及各个属性的含义
柑橘乌云_
08-23 3041
是background-color，background-image，background-repeat，background-attachment，background-position,background-size。注意：如果用background-size,一定要用/分隔接下来。
CSS 常用样式background背景属性
猿码互联
10-12 6381
一、背景颜色 background-color一、背景颜色 background-colorCSS中的background-color是用来设置HTML元素的背景颜色的一个属性。它可以接受各种颜色值，包括具有名称的颜色和十六进制颜色值。以下是一些示例代码：在上面的代码中，background-color属性的值是用来定义HTML元素的背景颜色的。在第一个例子中，背景颜色被设置为红色。在第二个例子中，背景颜色被设置为十六进制颜色值。
无限极分类在html怎么用,JavaScript+CSS无限极分类效果完整实现方法_javascript技巧...
weixin_39746652的博客
06-17 354
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考，具体如下：CSS样式：a {text-decoration:none;}a,a:visited {color:#000;background:inherit;}body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}dt {font-size:...
background复合属性顺序_[网页设计]background复合属性详解（上）：background
weixin_35459464的博客
02-23 939
[网页设计]background复合属性详解(上)：background0 2015-12-15 13:03:24background复合属性是个很复杂的属性，花样非常多，比较神奇的是css3中支持多图片背景了，这篇文章先讲讲background-image属性，其他背景属性会在后续的文章综合总结。一、最基本的情况是指定一张图片的url作为背景： .parent{ hei...
CSS背景属性Background详解
weixin_33933118的博客
02-01 266
CSS背景属性Background详解 本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。 css2 中的背景（background） CSS2 中有5个主要的背景（background）属性，它们是： background-color： 指定填充背景的颜色。background...
纯CSS教你实现磨砂玻璃背景效果（附代码）
前端仙人的博客
03-01 1万+
磨砂玻璃效果已经在互联网上流行了很多年，Mac OS以其磨砂玻璃效果而闻名，Windows 10也通过其他一些灯光，深度，运动，材质，比例尺实现了磨砂玻璃的效果 在CSS中使用磨砂玻璃效果时，我们中的一些人知道该怎么做，而其他人仍会在百度搜索： 怎么做？？ “ css光泽效果” “ css毛玻璃” “透明模糊背景css” “毛玻璃效果photoshop” “仅cs模糊背景” “ css玻璃窗格” “ css背景滤镜” “ css模糊覆盖物” “ css div后面的模糊背景” 今天，我将展示仅C
❤️接近两万字 CSS之熟练掌握background，这一次帮你彻底弄懂背景属性❤️（建议收藏）
WangMin@汪末末
09-14 482
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在项目中为了网页的美观，通常会给网页或者某个元素设置背景，这时就会用到 CSS中background属性 来实现这个效果，这个属性是一个很基本的而且比较常用的样式 ，那么应该怎样来运用这个属性呢？一起来看看吧！！！ background的属性的语法格式 background的属性可以通过以下的参数来实现背景效果： background : background-color || backgroun
CSS 样式的 initial（默认）和 inherit（继承）以及 unset
热门推荐
CodingNoob
10-09 2万+
经常会碰到，问一个 CSS 属性，例如position有多少取值。 通常的回答是static、relative、absolute和fixed。当然，还有一个极少人了解的sticky。其实，除此之外， CSS 属性通常还可以设置下面几个值： initialinheritunsetrevert 1 2 3 4 5
background: inherit;
03-16
background: inherit; 的意思是继承父元素的背景属性。如果子元素没有自己的背景属性，那么它将继承父元素的背景属性。这样可以使得子元素的背景与父元素的背景保持一致，从而达到一致的视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值