☏電話13401951240
客戶至上·專業至上
客戶至上，專業第一

用圖片做背景的css怎麼寫

來源：沐陽科技 作者：網頁製作 2024-09-03 16:48:27 0
要用图片作为背景，可以使用 CSS 的 background-image 属性来设置。你可以根据需要调整背景图片的大小、重复方式、位置等。

基本的 CSS 示例

設定背景圖片

css复制代码/* styles.css */.background-container {    width: 100%;    height: 400px; /* 设置容器高度 */
    background-image: url('https://example.com/image.jpg'); /* 背景图片的URL */
    background-size: cover; /* 将背景图像等比缩放以完全覆盖容器 */
    background-position: center; /* 背景图像居中显示 */
    background-repeat: no-repeat; /* 禁止背景图片重复 */}

示例解釋

  1. background-image: 设置背景图片的 URL，指向需要用作背景的图片的路径或 URL。

  2. background-size:

  • cover: 背景图像将会按比例缩放，以完全覆盖容器，不会有空白区域，但可能部分图像会被裁剪。

  • contain: 背景图像将按比例缩放，以完全适应容器，整个图像都会显示，但可能会有空白区域。

  • background-position: 设置背景图像的显示位置。

    • center: 背景图像居中显示。

    • top, bottom, left, right: 设置具体显示方位。

  • background-repeat: 设置背景图像是否重复。

    • no-repeat: 不重复背景图像。

    • repeat: 背景图像会在水平方向和垂直方向重复。

    • repeat-x: 只在水平方向重复。

    • repeat-y: 只在垂直方向重复。

    應用示例

    HTML結構

    html复制代码
    
    
    背景图片示例
    
    
        
    这是一个带背景图片的容器
    
        
    这里是一些文本内容
    
    

    CSS樣式

    css复制代码/* styles.css */body {    margin: 0;    padding: 0;    font-family: Arial, sans-serif;
}.background-container {    width: 100%;    height: 400px;    background-image: url('https://example.com/image.jpg'); /* 替换成你实际的图片URL */
    background-size: cover;    background-position: center;    background-repeat: no-repeat;    color: white; /* 设置文字颜色 */
    display: flex;    justify-content: center;    align-items: center;    text-align: center;
}

    說明

    • background-image: url(...)：指定背景图片的路径或 URL。

    • background-size: cover：让图片覆盖整个背景区域。

    • background-position: center：使背景图片居中显示。

    • background-repeat: no-repeat：防止背景图片重复。

    效果

    该代码会创建一个容器，背景为指定的图片，文本内容居中显示且不被背景图片遮挡。你可以根据需求调整相关的 CSS 属性以获得不同的效果。