css3设置背景图片的大小

background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

语法:

1 background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
2 background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
3 background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
4 background-size:cover;/* 将背景图片等比缩放填满整个容器 */
5 background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
时间: 2024-10-10 06:48:38

css3设置背景图片的大小的相关文章

background-size 设置背景图片的大小

background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1.auto:默认值,不改变背景图片的原始高度和宽度: 2.<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放: 3.<百分比>

css3 设置背景图片大小(缩略图形式缩小)

废话当然不说了.直接上代码 <style> #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; background-repeat:no-repeat; border-radius: 4px; border: 1px solid #ccc; width: 400px; height: 400px; } </style> <div id="mycon"> 原来背景图大小:

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CSS设置背景图片代码

CSS设置背景图片代码:设置背景图片并不难,但是有时候会忘记url的格式怎么写,之所以写这篇文章,就是让忘记者查询到,寄希望提供一定的帮助.代码如下: background-image:url(mytest/demo/small.jpg) 相关阅读:1.background属性可以参阅background属性用法详解一章节. 2.background-image可以参阅CSS的background-image属性一章节. 原文地址是:http://www.softwhy.com/forum.ph

visual studio 2013设置背景图片

今天听了公司的一个经验分享会,发现VS竟然可以设置背景图片!还是个萌妹子!!被萌了一脸鼻血!!! 设置方法很简单:安装扩展ClaudiaIDE 1.在这里下载扩展,https://visualstudiogallery.msdn.microsoft.com/9ba50f8d-f30c-4e33-ab19-bfd9f56eb817 2.然后双击即可完成安装. 之后重启VS,就可以看到编程背景上多了一个萌妹子,据说是一个日本人设计的VS虚拟形象,效果如下: 该插件的背景萌妹子图片位置在: C:\Us

CSS如何设置背景图片水平重复和垂直重复

CSS如何设置背景图片水平重复和垂直重复: 设置背景图片的水平平铺或者垂直平铺非常的简单,使用两端代码就可以了,代码如下: background:url("photo.gif") repeat-y; 以上代码可以让背景图片在垂直方向上平铺. background:url("photo.gif") repeat-x; 以上代码可以让背景图片在水平方向上平铺. 非常的简单,具体可以参阅以下两篇文章: 1.background-repeat属性可以参阅CSS的backgr