html元素背景样式大小调整

定义元素背景设置 background-size属性cover自适应填充背景,background-size: 100% 100%; background-size: 左右比例  上下比例;

再介绍几个特殊属性:

background-clip :

background-origin :

background-size :背景尺寸。

background-break :

IE兼容background-size添加下面属性

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src=‘http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg‘,

    sizingMethod=‘scale‘);

——————————————————————————————————————————————————

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>让IE兼容background-size的方法</title>

<style>

.bgpic {

    background-image: url(‘http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg‘);

    background-size: cover;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src=‘http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg‘,

    sizingMethod=‘scale‘);

}

</style>

</head>

<body>

    <div  class="bgpic" style="width:200px;height:100px;"></div>

</body>

</html>

html元素背景样式大小调整

时间: 2024-11-10 13:56:43

html元素背景样式大小调整的相关文章

CSS3:元素的边框、背景和大小

边框 和边框相关的属性如下. border-width 用于设置边框的宽度,可选择包括: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值: 2)<百分数>:将边框宽度值设为边框绘制区域的宽度的百分数: 3)thin.medium和thick:将边框宽度设为预设宽度,这三个值的具体意义是由浏览器定义,三个值代表的宽度一次增大,边框宽度的默认值是medium. border-style 用于设置绘制边框使用的样式,可以是下列值的任意一个. 1)none

Eclipse设置:背景与字体大小和xml文件中字体大小调整

Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text Editors,右边出现TestEditors面板. 面板中有这样一个选项:Appearance color options:其中是各种板块颜色的

(备忘)Eclipse设置:背景与字体大小和xml文件中字体大小调整

Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text Editors,右边出现TestEditors面板. 面板中有这样一个选项:Appearance color options:其中是各种板块颜色的设置,其中有一项是background color,勾掉System Default,点击'color',弹出颜色选择面板,选择喜好的颜色,单击确定.

MyEclipse背景与字体大小和xml文件中字体大小调整

1.打开window / Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Text Editors,右边出现TestEditors面板. 面板中有这样一个选项:Appearance color options:其中是各种板块颜色的设置,其中有一项是background color,勾掉System Default,点击'color',弹出颜色选择面板,选择喜好的颜色,单击确定. 注:背景颜色眼科专家推荐:色调85,饱和度,

CSS元素、边框、背景样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只   对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

(一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-family:字体族 比如说:微软雅黑 font-style:字体的样式 italic斜体 normal正常 font-variant:small-caps 将字母转化为小一号的大小字母 注意:所有属性也可以通过font一个属性写,例如: font:italic bold 75%/1.8 'Microsoft

android checkBox背景样式及用颜色值实现按钮点击效果

1  使用颜色值(不使用图片)来实现按钮的点击效果: color.xml <color name="head_color">#836FFF</color> <color name="information_title_color">#666666</color> <color name="list_bg_color">#FFF4F4F4</color> <color n

背景样式、列表样式、变形样式、过渡动画

背景样式 背景原点:background-origin : border-box(从border区域(含border)开始显示背景图像.) padding-box(从padding区域(含padding)开始显示背景图像.) content-box(从content区域开始显示背景图像.) <style type="text/css"> .box{ width: 250px; height: 250px; float: left; margin-left: 20px; pa

icheck如何修改样式大小

icheck默认样式比较大,有需求调整checkbox大小. 1. 最简单的方法可用css3来实现,让整个模块层缩放,不兼容低版本浏览器. transform:scale(0.7,0.7) 2. 为了更好的兼容,最好的解决方案: 修改icheck本身默认样式的 width / height 来实现, 虽然宽高改变了,但是背景图片大小依旧,所以多了一步步骤,修改图片大小.完成. .icheckbox_square-blue, .iradio_square-blue { width: 22px;