web前端入门到实战：背景图片的练习、精灵图

魔方编程

于 2019-10-06 21:00:00 发布

阅读量532

点赞数

文章标签：前端 web前端前端开发 css 前端教程

本文链接：https://blog.csdn.net/wewfdf/article/details/102251995

版权

一、背景图片练习

解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。

总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d101_background_image_exercise</title>

    <style>

        .box1{

            width: 1600px;

            height: 900px;

            background-image: url("image/scratch_fish.jpg");

            background-position: center center;

           

        }

        .box2{

            width: 1600px;

            height: 500px;

            background-image: url("image/buyudaren.jpg");

            background-position: center center;

            background-repeat: no-repeat;

        }

</style>

</head>

<body>

<div class="box1">

    <div class="box2">

最低0.47元/天解锁文章

魔方编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：背景图片的练习、精灵图

一、背景图片练习解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了<!DOCTYPE html><html lang="en"><head> <met...
复制链接

扫一扫