CSS和CSS3背景图片

CSS的背景，无法伸缩图片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background</title>

    <style>

        div{

            width: 100%;

            height: 1500px;

            border: 10px solid red;

            background: skyblue url(img/bg-little.png) no-repeat top right fixed;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

而CSS3的background-size指定了背景图片是否扩大缩小。contain一边紧贴边缘拉伸，最终高或者宽有留白。 cover按照一遍拉伸，很可能内容区域超出。而设置100% 100%是高，宽都能将内容显示出来。具体还是跟图片有关。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Size</title>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

    border: none;

}

div {

    width: 800px;

    height: 400px;

    padding: 50px;

    border: 50px solid transparent;

    /*background: color position size repeat origin clip attachment image;*/

    /*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/

    background: #abcdef url('bg1.jpg') no-repeat center center;

    background-size: 50%;

    background-origin: content-box;

    background-clip: content-box;

    background-attachment: fixed;

}

span.div_border {

    position: absolute;

    top: 0;

    left: 0;

    width: 800px;

    height: 400px;

    padding: 50px;

    border: 50px solid rgba(255, 0, 0, .25);

}

span.div_padding {

    position: absolute;

    top: 50px;

    left: 50px;

    width: 800px;

    height: 400px;

    border: 50px solid rgba(255, 255, 0, .25);

}

</style>

</head>

<body>

<div></div>

<span class="div_border"></span>

<span class="div_padding"></span>

</body>

</html>

浮动

就是高度丢失了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

   <style type="text/css">

   * {

           margin:0;

           padding:0;

   }

       .container {

           border:1px solid blue;

           margin:100px;

           /*overflow: hidden;*/

           /*zoom: 1;*/

       }

       .block1 {

           width:50px;

           height:50px;

           background-color: red;

           float: left;

       }

       .block2 {

           width:50px;

           height:50px;

           background-color: black;

           float: left;

       }

       .block3 {

           width:50px;

           height:50px;

           background-color: blue;

           float: left;

       }

   </style>

</head>

<body>

    <div class="container">

        <div class="block1"><span>1</span></div>

        <div class="block2"><span>22</span></div>

        <div class="block3"><span>333</span></div>

    </div>

</body>

</html

还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。

定位

relative 相对定位，可定位的祖先元素，相对定位的元素不会离开常规流。

absolute 绝对定位，使元素脱离常规流，使元素的位置与文档流无关，因此不占据空间。元素绝对定位后 生成块状元素，不论原来它在正常文档流中是什么类型的元素。可结合 top、left、right bottom 使用。绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，可以是 absolute、relative、fixed。

fixed 固定定位，固定定位元素不会随着视口滚动而滚动，继承absolute特点，参照物是视口。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position-relative</title>

    <link rel="stylesheet" href="./reset.css">

    <style>

    .block {

        position: relative;

        top: 0;

        left: 0;

        width: 80px;

        height: 80px;

        line-height: 80px;

        border: 2px solid black;

        text-align: center;

        float: left;

        z-index: 9;

    }

    .block:nth-child(2) {

        position: relative;

        top: 0;

        left: -80px;

        border-color: red;

        z-index: 1;

    }

    </style>

</head>

<body>

    <div class="block">A</div>

    <div class="block">B</div>

</body>

</html>

居中

元素内容单行，多行居中，table-cell针对Margin并不感冒，vertical-align，要有高度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>block、inline</title>

    <style type="text/css">

        #dan{

            width:300px;

            height:300px;

            border: 1px solid red;

            margin: 0 auto;

            text-align: center;

            line-height: 300px;

        }

        #warp{

            width:300px;

            height:300px;

            border: 1px solid red;

            margin: 0 auto;

        }

        #duo{

            height:300px;

            text-align: center;

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div id="dan">单行文本内容</div>

    <div id="warp">

        <div id="duo">

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

        </div>

    </div>

</body>

</html>
 
 

CSS和CSS3（背景，图片，浮动等）的更多相关文章

  1. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  2. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  3. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  4. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  5. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  6. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  7. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  8. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

  9. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  10. css 如何让背景图片拉伸填充避免重复显示

    如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...

随机推荐

  1. 2019-8-31-C#-如何引用-WshShell-类

    title author date CreateTime categories C# 如何引用 WshShell 类 lindexi 2019-08-31 16:55:58 +0800 2019-3- ...

  2. C51笔记-数码管#动态扫描#静态显示#中断#定时器

  3. 【强化学习】Markov Decision processes【二】

    目录 Markov Decision processes Markov Process Markov reward process Markov Decision processes 马尔可夫决策过程 ...

  4. HBase Meta 元信息表修复实践

    作者:vivo 互联网大数据团队 - Huang Guihu.Chen Shengzun HBase是一款开源高可靠.高可扩展性.高性能的分布式非关系型数据库,广泛应用于大数据处理.实时计算.数据存储 ...

  5. 基本base样式

    /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { ma ...

  6. 官宣：Splashtop与JumpCloud合作 提供单次登录远程访问解决方案

    号外! 官宣:Splashtop与JumpCloud合作 提供单次登录远程访问解决方案! 打开百度APP,查看更多高清图片 以下是一本正经的官宣新闻,我是没感情的翻译机器人,嘻嘻. Bad Robot ...

  7. Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型（Types）、方法（Methods）和事件（Events）的属性和参数解析

    一.类型(Types) 一.OpenPopupOptions 1. 属性 windowId: number 可选 打开操作弹出式窗口的窗口 ID.如果未指定,则默认为当前活动窗口. 二.TabDeta ...

  8. C4996 scanf': This function or variable may be unsafe. Consider using scanf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details

    编译器报错,编译器使用的是Visual Studio2019版本 修改项目属性的检测sdl. 第一步,右键项目--->属性 *第二步,在打开的属性中选择,配置属性-->C/C++---&g ...

  9. QShop商城-快速开始-前端

    QShop商城-快速开始-前端 工具准备 NodeJs 前端环境为NodeJs,下载地址:http://nodejs.cn/download/current/ . 默认会用版本为Node 16,如找不 ...

  10. Android 13 - Media框架（4）- MediaPlayerService

    关注公众号免费阅读全文,进入音视频开发技术分享群! MediaPlayerService是android的多媒体框架的核心服务之一,该服务存储有android平台所支援的编解码器信息,管理所有通过Me ...