CSS渡一教程学习笔记(十五)--背景图片链接处理企业开发经验

最新推荐文章于 2024-02-16 09:45:21 发布

zhou_shadow

最新推荐文章于 2024-02-16 09:45:21 发布

阅读量186

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/92015973

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

图片链接

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片实际中的应用</title>
    <style>
        a {
            /*第一种方案*/
            /*display:block;*/
            /*width:80px;*/
            /*height:50px;*/
            /*text-decoration:none;*/
            /*background-image:url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);*/
            /*background-size:80px 80px;*/
            /*!*将段落的第一行缩进 100像素：*!*/
            /*text-indent:150px;*/
            /*!*不换行; 强制在同一行显示;*!*/
            /*white-space:nowrap;*/
            /*overflow:hidden;*/

            /*第二种方案*/
            /*display:block;*/
            /*width:80px;*/
            /*height:0px;*/
            /*text-decoration:none;*/
            /*background-image:url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);*/
            /*background-size:80px 80px;*/
            /*padding-top:50px;*/
            /*overflow:hidden;*/
        }
    </style>
</head>
<body>
<!--
1、一般来说行级元素只能嵌套行级元素
块级元素可以嵌套任意元素
但有一个例外
<p>
<div></div>
</p>
这样写错误。会被浏览器处理成
<p></p>
<div></div>
<p></p>
这样，导致错误发生。
2、a标签里面不能嵌套a标签。
-->
<a href="http://taobao.com">淘宝网</a>
</body>
</html>

结果：
在这里插入图片描述

底层图片配置常见属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片处理</title>
    <style>
        .content{
            width:200px;
            height:200px;
            border:1px solid red;
            background-image:url(finance.jpg);
            background-size:100px 100px;
            background-repeat: no-repeat;
            background-position:center center;
        }
    </style>
</head>
<body>
<div class="content">
</div>
</body>
</html>

结果:
在这里插入图片描述

zhou_shadow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS渡一教程学习笔记(十五)--背景图片链接处理企业开发经验

图片链接代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图片实际中的应用</title> <style> a { /*第一种方案*/ ...
复制链接

扫一扫