本文目錄導(dǎo)讀：

1. 控制圖片大小
2. 控制圖片位置
3. 綜合應(yīng)用

CSS控制圖片大小位置的方法

在CSS中，我們可以使用多種屬性來控制圖片的大小和位置，以下是一些常用的方法：

控制圖片大小

在CSS中，可以使用width和height屬性來控制圖片的大小，將圖片的寬度設(shè)置為500像素，高度設(shè)置為300像素：

img {
  width: 500px;
  height: 300px;
}

控制圖片位置

在CSS中，可以使用position屬性來控制圖片的位置，position屬性有以下幾個值：

static默認值，圖片按照正常文檔流進行定位。

relative相對于其正常位置進行定位。

absolute相對于***近的非static定位的祖先元素進行定位。

fixed相對于瀏覽器窗口進行定位。

將圖片相對于其正常位置向右移動50像素，向下移動20像素：

img {
  position: relative;
  right: 50px;
  bottom: 20px;
}

綜合應(yīng)用

在實際應(yīng)用中，我們可能會將以上兩種方法綜合應(yīng)用，將一張圖片設(shè)置為背景圖片，并控制其大小和位置：

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: right top; /* 將背景圖片定位在右側(cè)和頂部 */
  background-size: 500px 300px; /* 將背景圖片的寬度設(shè)置為500像素，高度設(shè)置為300像素 */
}

通過以上方法，我們可以使用CSS來***控制圖片的大小和位置，以滿足不同的設(shè)計需求。