如何将 CSS 中设置的图像背景展示出一半？

发布时间：2023-09-08 14:23:05 所属栏目：语言来源：

导读：在这篇文章中，我们来学习一下“CSS中设置背景图片显示一半的方法是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

在这篇文章中，我们来学习一下“CSS中设置背景图片显示一半的方法是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

方法：1、给元素添加“background-repeat:no-repeat”样式，设置背景只显示一次；2、利用“background-size”属性设置背景只显示一半，语法为“元素{background-size:50% 100%}”。

在css中，想要设置一半背景，可以利用background-size属性，background-size属性用于指定背景图片大小。

该属性的值表示如下：

示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

  div{

    width:300px;

    height:300px;

    border:1px solid #000;

    background-image:url(1111.png);

    background-repeat: no-repeat;

    background-size:50% 100%;

  }

  </style>

</head>

<body>

  <div></div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!