CSS盒子模型是前端開發(fā)中經(jīng)常用到的模型之一，通過設(shè)置不同屬性值，可以實現(xiàn)各種UI效果。其中，透明效果是很多設(shè)計師和開發(fā)人員所需要的，但是有時候我們需要的是盒子透明，而內(nèi)容不透明。本文將介紹如何實現(xiàn)這種效果。

.box {
background-color: rgba(255, 255, 255, 0.5);
/*這里設(shè)置盒子的背景色為白色，透明度為0.5，可以根據(jù)實際情況調(diào)整*/
padding: 20px;
}
.box-inner {
background-color: #ffffff;
/*這里設(shè)置盒子內(nèi)部內(nèi)容的背景色為白色，不透明*/
padding: 20px;
}

以上是實現(xiàn)效果的CSS代碼。我們首先設(shè)置了一個外部盒子，通過設(shè)置background-color屬性的rgba值，實現(xiàn)了盒子透明的效果。當然，這里也可以使用opacity屬性來實現(xiàn)透明效果，但是這樣就會影響到盒子內(nèi)部的內(nèi)容。因此，為了解決這個問題，我們在盒子內(nèi)部再設(shè)置一個內(nèi)部盒子，通過設(shè)置背景色來實現(xiàn)內(nèi)容不透明的效果。

當然，如果你需要使用圖片作為背景，也可以使用以下代碼來實現(xiàn)透明盒子，不透明內(nèi)容的效果：

.box {
background-image: url('your-image.jpg');
background-size: cover;
/*這里設(shè)置背景圖片，cover屬性會自適應(yīng)填充整個盒子*/
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
}
.box-inner {
background-color: #ffffff;
padding: 20px;
}

以上就是實現(xiàn)CSS盒子透明，內(nèi)容不透明的方法，希望對大家有所幫助。