CSS3教程:背景图片(背景大小和多背景图)

背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。

CSS3的背景图片大小可以写成 background-size:Apx Bpx;
-Apx = x轴(图片宽度)
-Bpx = y轴(图片高度)

了解了这些,我们开始体验这个特性吧:
最好支持CSS3背景大小的浏览器是Safari和Opera,所以我们只需要使用-o和-webkit前缀。

背景大小

 #backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 250px; -webkit-background-size: 150px 250px; padding: 15px 25px; height: inherit; width: 590px; }

为了在CSS3中应用多背景图片,我们使用都好隔开,例如:

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

我们可以在一行代码中尝试放置多个不同的图片…

多背景图

#backgroundMultiple{ border: 5px solid #9e9aab; background:url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px; }

时间: 2024-11-05 12:29:00

CSS3教程:背景图片(背景大小和多背景图)的相关文章

背景图片自适应大小不重复,充满容器

问题描述 背景图片自适应大小不重复,充满容器 在网页设计的时候,我给div容器设置背景图片,怎么设置,能使背景图片不重复,自适应容器大小充满. 在容器中插入图片,能达到预期效果,但背景图的话,不知道怎么设置背景图属性. 解决方案 加上background-size:100% 100%; 解决方案二: BODY {background-image: URL(photo/picture1.jpg); background-position: center; background-repeat: no

android xml-菜鸟求问Button背景图片的大小如何设置

问题描述 菜鸟求问Button背景图片的大小如何设置 我想仿微信弄几个按钮的,我在xml文件中设置android:background="@drawable/weixin_1" 结果图片填充整个按钮,如何才能再不改变按钮大小的情况下让图片缩小放置于按钮中间呢 解决方案 android:id="@+id/linearlayout" android:layout_width="40dp" android:layout_height="40d

.net-10个三角形背景图片组合成一个六边形背景图片

问题描述 10个三角形背景图片组合成一个六边形背景图片 共有10个三角形背景图片,要求把10个背景图片组合成一个大的六边形背景图片 每个小的三角形背景图片正中间有文字显示,且这些文字是动态变化的(文字来源--数据库中查询所得) 求解,多谢.联系qq:787457074

Win8.1锁屏界面的背景图片怎么更换?锁屏背景更换教程

1. 在电脑键盘上我们同时按下[WIN]+[C]打开windows8.1开始菜单(超级按钮).   2. 然后在菜单中点击[设置]进入,如图所示.   3. 然后我们在设置中点击[更改电脑设置]进入,如图所示.   4. 现在我们如图点击"个性化设置"下方的[锁屏界面].   5. 然后在电脑的"锁屏界面预览"中会看到有各种图片了,在这里我们选择自己喜欢的吧:   6. 选择之后我们会看到预览效果了,如果你不喜欢系统自带的我们在下面的自定义或浏览点击可以选择你电脑其

css用一张背景图片实现导航菜单带背景图效果

网页制作教程,站长必备的高质量网页特效和广告代码.111cn.net,站长js特效. 首页 zz 特效 站长

如何在博客文章中添加背景图片

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 博客文章中添加背景图片 一.blog贴图(仅限网易博客) 其实贴图的显示问题和图片的来源有关.如果blog中插入的图片是来自网易相册的,就可以在主页显示,其它来源的图片就不能了.因此,大家想要贴图在主页显示,只要把图片先存入网易相册,再调用相册里的图片链接就ok了!(贴图应在设计视图完成!)设计图可以到我图网里下载http://www.ooo

C#发现之旅:WinForm.NET中开发具有固定背景图片的可滚动控件

在WinForm.NET开发中,可以使用一个Panel或UserControl作为一个带滚动条的容器放置 图形或其他控件.我们可以设置控件的BackgroundImage属性来设置控件的背景图片,但这个 背景图片是会随着控件内容的滚动而滚动的,而且还出现背景破碎的不良效果.现笔者在开 发实践中遇到控件的背景图片不随着控件的滚动而滚动. 在B/S开发中,开发者可以 使用"background-attachment:fixed"的CSS样式来固定HTML文档的背景图片, 使之不随着内容的滚

电脑锁屏背景图片如何更改

  工具/原料 搭载Windows7系统的电脑一台 设置开机背景图片 设置开机背景图片,也可以是锁屏的背景图片. 首先修改电脑的注册表,开始菜单,点运行,输入regedit确定打开注册表编辑器 在注册表编辑器窗口左侧,按照路径打开目标文件夹LogonUI下的Background文件夹,如图所示,鼠标双击OEMBackground出来个对话框,修改数值数据为1后确定,然后关闭注册表编辑器. 路径为: HKEY_LOCAL_MACHINE ┗SOFTWARE ┗Microsoft ┗Windows

利用jQuery和CSS将背景图片拉伸_jquery

现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起使用jQuery和CSS实现背景图片拉伸效果. 将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效果.这种效果在一些前卫的页面设计中已经广泛应用,尤其在一些独立页面,像登录页面使用拉伸的背景图片效果比较

如何给MFC对话框添加背景图片 .

1.添加背景图片到"Bitmap"资源里.方法为"插入--资源",如果还没有Bitmap,则新建一个Bitmap,否则选择资源      类型为"Bitmap"后"引入"想要插入的背景图片,我加入的背景图片如图1,加入过程如图2.       图1          图2                               说明:引入的图片可以插入256色.16位色或更高色的图片,若是其他格式图片可用PS打开再另存为B