#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.com/tianmuxi/p/9398587.html

时间: 2024-11-05 11:46:22

#css3# 可以多背景图设置的相关文章

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

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

navigationbar背景图 设置左右按钮

// 设置控制器的title self.title = @"O(∩_∩)O哈哈~"; // 设置navigationbar 的样式 // self.navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; // 设置navigationbar 的背景图 //[self.navigationController.navigationBar setBackgroundImage:[UIImage im

Java 窗体背景图+设置按钮样式

这个方法应该是比较麻烦的做法,因为背景图是放在窗体的第二层,如果窗体内容层有很多面板,就得挨个设置透明.话不多说,上代码: 1 import java.awt.Color; 2 import java.awt.Dimension; 3 import java.awt.FlowLayout; 4 import java.awt.event.WindowAdapter; 5 import java.awt.event.WindowEvent; 6 7 import javax.swing.Image

文本属性 以及背景图设置 相对 绝对定位 042

文本属性 : 文本对齐 text-align    有 none | center | left | right | justify 文本颜色  color   首行缩进   建议使用 em 即相对内容的大小 2em 即首行缩进2个文本内容字符 文本修饰 text- decoration none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decora

2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

一选择器复习 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>复习预习</title></head><body> 复习预习 <!-- 1.组合选择器 --> <!-- 群组选择器: div, #div, .div { 该样式块同时控制多个(div, #div, .div) } 每一个选择器位均可以为基础选择

背景图设置

背景图片位置 : background-position:值1 值2; (其中值1代表水平方向的位置,值2代表垂直方向的位置) 水平方向可以取默认的left左 center中 right右三个值,也可以写一个具体的偏移数值 垂直方向可以取默认的top上 center中 bottom下三个值,也可以写一个具体的偏移数值 水平方向给正值,图片往右边移动,给负值,图片往左边移动 垂直方向给正值,图片往下边移动,给负值,图片往上边移动 背景为透明: 在 chrome .firefox.opera 下是这

CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下: 核心代码如下: <div class="container"> <div class="pic"></div>

web前端入门到实战:CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下: 核心代码如下: <div class="container"> <div class="pic"></div>

【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; } background-image:背景图地址: background-repeat:图片是否重复: 参数: repeat