CSSでナビゲーションバーの背景画像を設定する方法-CSSチュートリアル-php.cn

CSSでナビゲーションバーの背景画像を設定する方法

WBOY

リリース： 2021-11-26 17:50:11

オリジナル

8725 人が閲覧しました

CSS では、「background-image」属性を使用してナビゲーションバーの背景画像を設定できます。この属性は主に要素に背景画像を追加するために使用されます。追加する必要があるのは「background」だけです-image:url" をナビゲーションバー要素に追加します。(ピクチャパス);" スタイルで十分です。

CSSでナビゲーションバーの背景画像を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css でナビゲーションバーの背景画像を設定する方法

css では、background-image 属性を使用してナビゲーションバーを設定できます。背景画像、背景 - image 属性は要素の背景画像を設定します。

要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。

デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。

例を挙げて、background-image 属性を使用して背景画像を設定する方法を見てみましょう。例は次のとおりです:

最初にナビゲーションバーを作成します

<!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 type="text/css">
    *{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       
       position: fixed;
       top: 0;
       width: 100%;
       
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover{
       background-color: red;
   }   
</style>
</head>
<body>
<ul>
   <li><a href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>
</body>
</html>

ログイン後にコピー

出力結果:

CSSでナビゲーションバーの背景画像を設定する方法

#現時点では、ナビゲーションバーには背景画像がありません。追加する必要があるのは、「background-image」だけです。 :url(picture path);" スタイルをナビゲーションバー要素に追加します。つまり、はい。例は次のとおりです。

ul{
       list-style-type: none;
       overflow: hidden;
       background-image:url(1118.02.png);
       position: fixed;
       top: 0;
       width: 100%;
   }

ログイン後にコピー

出力結果:

CSSでナビゲーションバーの背景画像を設定する方法