ホームページ > 記事 > ウェブフロントエンド > CSSの背景画像に枠線を追加する方法

CSSの背景画像に枠線を追加する方法

藏色散人オリジナル: 2021-03-01 10:18:357489ブラウズ

CSS 背景画像に境界線を追加する方法: 最初に HTML サンプルファイルを作成し、次に「background-image」を通じて背景画像を導入し、最後に border 属性を通じて境界線を設定します。

CSSの背景画像に枠線を追加する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

背景スタイル

一般的に使用される背景スタイル

背景色:background-color

background-color: gray;
background-color: #808080;
background-color: rgb(128,128,128);

背景画像:背景-image

body{background-image: url("images/bg.jpg");}

背景画像の繰り返し:background-repeat

#背景画像は垂直方向に繰り返し表示されます#no-repeat#inheritbackground-repeat 属性の設定を親要素から継承することを指定します背景画像の配置: 背景-position

value	description
繰り返し	デフォルト。背景画像は垂直方向と水平方向の両方で繰り返されます
repeat-x	背景画像は水平方向に繰り返されます
repeat -y
背景画像は 1 回だけ表示されます

background-position 属性値:

①キーワードを使用:

background-position:center left

②パーセント値を使用: background-position: 50% 50%

③長さの値を使用:background-position:300px 100px

/*背景样式综合使用*/
background: #00ff00 url(image/bg.jpg)  no-repeat center;

背景画像の修正:background- attachment

background-attachment プロパティは、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。

スクロール: デフォルト値。ページのスクロールに合わせて背景画像も移動します。

[推奨:
]

background-size

背景画像のサイズを指定します

背景サイズ: 長さ| パーセント| カバー| 含む;

##値説明length 背景画像の幅と高さを、浮動小数点数と単位で構成される長さの値として設定します。設定すると、2 番目の値が "auto" に設定されます。背景画像の幅と高さを親要素のパーセンテージとして設定します。最初の値のみが設定値で、2 番目の値は "auto" に設定されます。背景画像自体の幅と高さの比率を維持し、定義された背景の領域を正確にカバーするように画像を拡大縮小します。背景画像自体の幅と高さの比率を維持し、画像を拡大縮小します。定義された背景の領域に正確に適合する幅または高さにします。


	percentage
	cover
	contain

カバーして含まれる

CSSの背景画像に枠線を追加する方法

nbsp;html>


    <meta>
    <title>背景</title>
    <style>
        p{width: 700px;height: 400px;border: 2px solid plum;background-repeat: no-repeat;
            background-image: url(img/design.jpg);background-size: cover;}
    </style>


    <p>图片尺寸</p>

background-origin

背景画像の配置範囲を指定(background-positionの基準位置)

構文:

デフォルトは padding-box

background です-origin

CSSの背景画像に枠線を追加する方法

nbsp;html>


    <meta> 
    <style> 
        p{border:10px solid black;padding:35px;background-image:url(img/smiley.gif);
        background-repeat:no-repeat;background-position:0px 0px;}
        #p1{background-origin: padding-box;}
        #p2{background-origin:content-box;}
    </style>


    <p>背景图像边界框的相对位置：</p>
    <p>
      CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
    </p>
    <p>背景图像的相对位置的内容框：</p>
    <p>
      CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
    </p>

background-clip

背景の描画領域を指定します (背景が表示される場所を決定します)。

構文: 背景クリップ: ボーダーボックス| パディングボックス| コンテンツボックス;

値説明border-box境界領域の外側に背景をトリミングしますパディング領域の外側に背景をトリミングしますコンテンツ領域の外側に背景をトリミングします

padding-box

content-box

background-clip与background-origin

background-clip：border| padding| content 指定背景在哪些区域可以显示，但与背景开始绘制的位置无关。背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分。
background-origin：padding| border| content 指定背景从哪个区域(边框、补白或内容)开始绘制。可以用此属性在边框上绘制背景，但边框上的背景显不显示出来就要由background-clip来决定了。

nbsp;html>


    <meta> 
    <style>
        #example1 {
            width: 800px;
            height: 450px;
            border: 20px dotted black;
            padding: 50px;
            background-image: url(img/girl.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;           
            background-clip: padding-box;/*padding-box以外的都要剪辑掉*/
            background-origin: border-box;/*从border-box开始进行剪辑*/
        }
    </style>s


    <p></p>

边框样式

常用的边框样式

CSSの背景画像に枠線を追加する方法

border

设置边框宽度：border-width 宽度值。示例： border-width:1px;
设置边框颜色：border-color 颜色。示例：border-color:#cccccc;
设置边框样式：border-style 样式关键字。示例：border-style: solid;

CSSの背景画像に枠線を追加する方法

边框线类型

边框复合样式：border: width / style / color 示例：border: 3px dotted#ff9900

border-radius

圆角边框——border-radius 属性。

语法 border-radius: 1-4 length | %;

border-radius属性可包含两个参数值，第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径，两个参数值通过斜线分隔。如果仅包含一个参数值，表示两个值相同，即1/4圆角。

单位	描述
length	定义圆角的形状。（圆角半径）
%	比百分比定义圆角的形状

CSSの背景画像に枠線を追加する方法

border-radius

如果要绘制的圆角边框4个角的半径各不相同时，需按左上角、右上角、右下角、左下角的顺序设置每个方向圆角半径的值。

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius（绘制圆角边框的四个角的半径各不相同时，按照上述的顺序）

如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

p{
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 30px;
    /*上述的四句代码等同于：border-radius:0px 10px 20px 30px;*/
}

border-image

图像边框——border-image 属性

可以让元素的长度或宽度处于随时变化的边框统一使用一个图像文件进行绘制。
语法：border-image: url(图像文件的路径) A B C D

ABCD四个参数表示浏览器自动把图像分隔时的上边距、右边距、下边距以及左边距。

CSSの背景画像に枠線を追加する方法

border-image 属性是一个简写属性，用于设置以下属性：

值	描述
border-image-source	定义用在边框的图片的路径
border-image-slice	定义如何裁切背景图像
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

Shadow

ボックスに 1 つ以上の影を追加します - box-shadow プロパティ

構文: box-shadow: h-shadow v-shadow ブラースプレッドカラーインセット; # ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がCSSの背景画像に枠線を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html auto 继承 Length position padding border background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSで赤いハートを作る方法次の記事：CSSで赤いハートを作る方法

続きを見る