在現代化的互聯網生活中，二維碼已成為人們生活、工作中不可缺少的一部分。二維碼的應用在移動支付、實名認證、商品售賣等領域內扮演著重要的角色。但是，有時候我們在設計二維碼的背景樣式時，發現當二維碼旋轉時背景也跟隨著旋轉，導致背景與二維碼產生重疊、下移或放大等不良現象。如何才能在旋轉時背景不隨之變化呢？下面我們來介紹二維碼背景固定的方法。

.qrcode-wrap {
position: relative;
}
.qrcode-wrap:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url(/images/qrcode-background.png) no-repeat center center;
background-size: auto 100%;
transform-origin: center;
transform: rotate(0deg);
}

首先，我們需要將二維碼和背景放在一個相對定位的容器中，代碼如下：

.qrcode-wrap {
position: relative;
}

然后，我們需要使用:after偽類，創建一個絕對定位的偽元素，用于承載背景圖片和變形效果，代碼如下：

.qrcode-wrap:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url(/images/qrcode-background.png) no-repeat center center;
background-size: auto 100%;
transform-origin: center;
transform: rotate(0deg);
}

接下來，我們需要設置背景圖片的位置和大小以及包含的變形效果，代碼如下：

• background：設置背景圖片。 使用 no-repeat 屬性避免圖片的重復顯示。 使用 center center 屬性以及 background-size: auto 100% 屬性使圖片水平居中、垂直居中并且自適應高度。
• transform-origin：設置變形的基點，使用 center 屬性設置基點在畫面中央。
• transform：設置變形的效果，使用 rotate() 方法設置旋轉角度。這里設置為 0deg ，表示不旋轉。

如此，我們就用簡單的 css 代碼達到了二維碼背景固定的效果。當然，如果你有更加豐富的設計需要，可以對上述代碼進行進一步修改。