master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_utilities_background.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>背景 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">背景</div></header>
        <div class="card-body">

          <div class="border-example">
            <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
            <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
            <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
            <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
            <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
            <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
            <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
            <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
            <div class="p-3 mb-2 bg-indigo text-white">.bg-indigo</div>
            <div class="p-3 mb-2 bg-purple text-white">.bg-purple</div>
            <div class="p-3 mb-2 bg-pink text-white">.bg-pink</div>
            <div class="p-3 mb-2 bg-yellow text-white">.bg-yellow</div>
            <div class="p-3 mb-2 bg-cyan text-white">.bg-cyan</div>
            <div class="p-3 mb-2 bg-brown text-white">.bg-brown</div>
            <div class="p-3 mb-2 bg-teal text-white">.bg-teal</div>
            <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
            <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
            <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
          </div>
          <pre>&lt;div class="p-3 mb-2 bg-primary text-white"&gt;.bg-primary&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-secondary text-white"&gt;.bg-secondary&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-success text-white"&gt;.bg-success&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-danger text-white"&gt;.bg-danger&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-warning text-dark"&gt;.bg-warning&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-info text-dark"&gt;.bg-info&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-light text-dark"&gt;.bg-light&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-dark text-white"&gt;.bg-dark&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-indigo text-white"&gt;.bg-indigo&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-purple text-white"&gt;.bg-purple&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-pink text-white"&gt;.bg-pink&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-yellow text-white"&gt;.bg-yellow&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-cyan text-white"&gt;.bg-cyan&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-brown text-white"&gt;.bg-brown&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-teal text-white"&gt;.bg-teal&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-body text-dark"&gt;.bg-body&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-white text-dark"&gt;.bg-white&lt;/div&gt;
&lt;div class="p-3 mb-2 bg-transparent text-dark"&gt;.bg-transparent&lt;/div&gt;</pre>
          <h6>背景渐变</h6>
          <p>你的自定义CSS需要渐变吗？只需添加 <code>background-image: var(--bs-gradient);</code> 。</p>

          <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
          <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
          <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
          <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
          <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
          <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
          <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
          <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
          <div class="p-3 mb-2 bg-indigo bg-gradient text-white">.bg-indigo.bg-gradient</div>
          <div class="p-3 mb-2 bg-purple bg-gradient text-white">.bg-purple.bg-gradient</div>
          <div class="p-3 mb-2 bg-pink bg-gradient text-white">.bg-pink.bg-gradient</div>
          <div class="p-3 mb-2 bg-yellow bg-gradient text-white">.bg-yellow.bg-gradient</div>
          <div class="p-3 mb-2 bg-cyan bg-gradient text-white">.bg-cyan.bg-gradient</div>
          <div class="p-3 mb-2 bg-brown bg-gradient text-white">.bg-brown.bg-gradient</div>
          <div class="p-3 mb-2 bg-teal bg-gradient text-white">.bg-teal.bg-gradient</div>

          <h6>不透明度</h6>
          <div class="border-example">
            <div class="bg-success p-2 text-white">这是默认的 success 背景</div>
            <div class="bg-success p-2" style="--bs-bg-opacity: .5;">这是 50% 不透明度的 success 背景</div>
          </div>
          <pre>&lt;div class="bg-success p-2 text-white"&gt;这是默认的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2" style="--bs-bg-opacity: .5;"&gt;这是 50% 不透明度的 success 背景&lt;/div&gt;</pre>
          <p>或者，从任何一个选项中选择 <code>.text-opacity</code> 相关类：</p>
          <div class="border-example">
            <div class="bg-success p-2 text-white">这是默认的 success 背景</div>
            <div class="bg-success p-2 text-white bg-opacity-75">这是 75% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-50">这是 50% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-25">这是 25% 不透明度的 success 背景</div>
            <div class="bg-success p-2 text-dark bg-opacity-10">这是 10% 不透明度的 success 背景</div>
          </div>
          <pre>&lt;div class="bg-success p-2 text-white"&gt;这是默认的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-white bg-opacity-75"&gt;这是 75% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-50"&gt;这是 50% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-25"&gt;这是 25% 不透明度的 success 背景&lt;/div&gt;
&lt;div class="bg-success p-2 text-dark bg-opacity-10"&gt;这是 10% 不透明度的 success 背景&lt;/div&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>