css3基础 background-size 背景缩放

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
        div {
            width: 400px;
            height: 500px;
            background-image: url("../images/person.jpg");
            background-repeat: no-repeat;

            /* 块元素转为行内块元素,这样的话更好看出差别 */
            display:inline-block;
        }
        .bgi-cover {
            background-color: lightblue;
            /* 宽与高要同时满足 */
            background-size: cover;
        }
        .bgi-contain {
            background-color: lightgreen;
            /* 宽与高,有一个满足就可以了 */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="bgi-cover">

    </div>

    <div class="bgi-contain">

    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440503.html

时间: 2024-11-11 16:55:42

css3基础 background-size 背景缩放的相关文章

CSS3 基础知识

CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平.垂直.模糊.扩展)             box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)    1.3 边框图像 border-image2.背景    2.1 background-size background-size:

《html5与css3基础教程》(第8版)个人笔记

<html5与css3基础教程(第8版)个人笔记 四至六章 small 行内 短语版权符号:&copy 可任意嵌套,html和html5表示含义不一样 strong 重要 em 强调 html5中 b i figure:图figcaption可以用来添加署名? blockquote中的cite:提供引述文本的位置 很多开发人员避免使用q,而是手动添加引号或字符实体datetime可以用于在web应用之间同步日期和时间 YYYY-M-DDThh:mm:ss或hh:mm.sssUTC全球标准时间

CSS3基础整理(3月9号)

参考W3School内容整理 CSS3根据特征可以分为:动画属性,背景属性,边框属性,Box属性,Color属性,尺寸属性,可伸缩属性,字体属性,文本属性,内容生成,Grid属性,超链接属性,列表属性,外边距属性,内边距属性,多列属性,定位属性,打印属性,表格属性,2/3D转换属性,过渡属性,用户界面属性等. 1.动画属性,动画属性是CSS3新增加的属性,这样很多以前通过js实现的效果 通过CSS就可以实现了. 动画属性中包括:@keyframes(规定动画),支持情况(IE9以及之前不支持,最

css3基础教程:CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m

背景缩放

只有图片可以设置宽度和高度,背景图片可以通过: background-size:宽度   高度; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen">

htML+CSS3-》第3阶段:HTML5之CSS3基础与加强 中

HTML+CSS3->第3阶段:HTML5之CSS3基础与加强中 60前端开发基础视频-复合选择器之子元素选择器 子元素选择器,是让css选择器智能选择子辈的元素. 例如:h1>strong{color:red;} 解读为:选择器h1>strong可以解释为"选择作为h1元素子元素的所有strong元素". 61前端开发基础视频-属性选择器 属性选择器 <!DOCTYPE html> <html lang="zh"> <

css基础-Background&amp;Text

css基础-Background&Text     以下笔记为复习css的一些基础,每一节我都做了一个简单的总结事例,以便参考: 1 /*CSS 属性定义背影效果: 2 3 background-color 定义了元素的背景颜色. 4 background-image 定义了元素的背景图像. 5 background-repeat 定义是否重复 6 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 7 background-position 改变图像在背景中

【前端】背景缩放和渐变

背景缩放 Background-size background: 可放/*颜色 图片 平铺 位置 滚动*/; border: 1px solid red; /*background-size: w h 规定背景图像的尺寸;*/ /*background-size: 100px 100px;*/ /*background-size: 100px; 如果只有一个值 后面一个值默认为 auto 等比例缩放*/ /*background-size: cover; 图片部分可能不完整,超出部分会被切掉 *

0074 二倍图:物理像素&amp;物理像素比、背景缩放background-size

3.1物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的.这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334. 我们开发时候的1px 不是一定等于1个物理像素的. 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比. 如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放. lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度. 对于一张 50px * 5

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯