用CSS3将你的设计带入下个高度[译]（6）
作者：神采飞扬 来源：前端观察 发布时间：2009-06-22 13:03:00
4. 多背景图
CSS3 允许你使用多个属性比如background-image、 background-repeat, background-size, background-position, background-origin and background-clip等在一个元素上添加多层背景图片.
在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一个图片将是离用户“最近”的那个。
该属性的一个更复杂的版本可以是这样的：
div {
background: url(example.jpg) top left (100％ 2em) no-repeat,
url(example2.jpg) bottom left (100％ 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在这里，(100％ 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100％宽度和2em的高度。
因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。
浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效
扩展阅读：
5. Word Wrap
word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字，如连字符。如果使用了break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。
WordPress 后台在数据表中使用了word-wrap.
在WordPress 的控制面板中，word-wrap 属性被用于表格中的元素；比如在日志和页面的列表中：
.widefat * {
word-wrap: break-word;
}
浏览器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 将在3.5版本中支持它。
扩展阅读：
0
投稿猜你喜欢
- 我就废话不多说了，大家还是直接看代码吧~from keras.applications.vgg16 import VGG16#直接导入已经训
- 如下所示：#! usr/bin/python#coding=utf-8 import numpy as npimport matplotli
Python FastAPI请求参数传递FastAPI多参数传递类型FastAPI通过模板来匹配URL中的参数列表，大致有如下三类方式传递参- 上篇文章介绍了ROS TF坐标变换基本概念及使用案例，今天给大家介绍ROS机器人底盘坐标像素变换，一起看看吧对于ROS
- 如下所示：后台关键代码：data = {}#keys与values分别为该数据的键数组，值的数组。这里循环为字典添加对应键值for k, v
- 又发一个js版幻灯片，接口比较少，但功能和外观都还不错的，可自定义切换时间：）method: adRotator.initialize(容器
- 作为EBS开发人员，开发工具用的多，部署代码类型多，管理程序麻烦，操作繁琐，一直是我最讨厌的事情。部署一次程序要使用好几个工具，
- 基本示例?计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用&rdquo
- 1、查看数据库中有哪些用户？ select username from all_users;
- 国际象棋是当今国际上最流行的智力体育运动项目。青年人下棋可以锻炼思维、增强记忆力和培养坚强的意志；中年人下棋可以享受美学；老年下棋可以很好的
- 昨天同事问了我一个问题，有两个循环语句： for(i = n; i > 0; i--) { … } for(i = 0; i <
- 版本一：按分隔符进行比较 算法思路：按分隔符截取搜索字符串循环与待搜索字符进行比较 USE [Fly] GO --参数：@inStr 待搜索
- Update 语句Update 语句用于修改表中的数据。语法：UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值P
- Step 1：Creating a Linked Server. EXEC sp_addlinkedserver 'ADSI'
- 这篇文章主要介绍了简单了解python字符串前面加r,u的含义,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,
- 1.zip用法简介在python 3.x系列中，zip方法返回的为一个zip object可迭代对象。class zip(object):&
- 一、安装pip install xlwt二、创建表格并写入import xlwt# 创建一个workbook并设置编码workbook =
- 一、临时表实现分步处理1.概述当需要的结果需要经过多次处理后才能最终得到我们需要的结果时，就可以使用临时表，这里临时表就起到了一个中间处理的
- 今天用pytorch保存模型时遇到bugCan't pickle <class 'torch._C._Variable
- 我的数据库如图结构我取了其中的name age nr，做成array，只要所取数据存在str型，那么取出的数据，全部转化为str型，也就是a
