如何讓我的背景圖像占據 div 的全高？

Question

我有一個帶有背景圖像的 div，我試圖給它一個透明類型的邊框。

目前，這適用於側邊框，但頂部和底部邊框不會填充圖像。 我將如何實現這一目標？

 .picture-div { background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; border: 25px solid rgba(100, 100, 100, .50); width: 200px; height: 200px; border-radius: 60px; }

 <div class="picture-div" />

Answer 1

將 background-origin 添加到邊框框，以便圖像填充邊框。 您可以在以下位置閱讀詳細信息： https://www.w3schools.com/cssref/css3_pr_background-origin.asp

 .picture-div { background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-origin: border-box; border: 25px solid rgba(100, 100, 100, .50); width: 200px; height: 200px; border-radius: 60px; }

 <div class="picture-div" />

Answer 2

您可以在picture-div class 的偽:before上使用邊框，如下所示：

 .picture-div { background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; width: 200px; height: 200px; border-radius: 60px; }.picture-div:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 25px solid rgba(100, 100, 100, .50); border-radius: 60px; }

 <div class="picture-div" />