Daftar catatan
- Backroud gambar dengan opacity
- Backroud gambar dengan opacity & aspect ratio
- Backroud gambar hitam putih dengan opacity & aspect ratio
- Backroud opacity, aspect ratio dan auto scroll
- -
Catatan 1
Bacground gambar dengan opacity
<!--Gambar background dengan opacity-->
<img alt="BackgroundGambar"src="Url gambar" style="border-radius: 5px; box-sizing: border-box; height:1000px; left: 0px; object-fit: cover; opacity: 1.25; padding: 0px; position: absolute;
top: 0px; width: 100%;z-index: 0;" /><div style="padding: 20px; position: relative; z-index: 1;">menulis disini
Contoh pemasangan Url
<img alt="BackgroundGambar"src="https://blogger.googleusercontent.com/img/
b/R29vZ2xl/AVvXsEghc3cHsNdb4gzmShyphenhyphend_6ZrG8jx47AQAxxkkErHvrQcJwds85IrVKxOVfe2L59m136rDR3ms8Ix6ySkDg3VhCKAnKvJ8iIOGMBIcppolo0n0DRdVGnBQ_VUr4TlfvwyH7SXTY59ualElBybfwIzFCre0SCuOXrWevgdq3IQNM6P5L1kWrWcANHGTdEA7k/s600/rrr-ezgif.com-video-to-gif-converter.gif" style="border-radius: 5px; box-sizing: border-box; height:1000px; left: 0px; object-fit: cover; opacity: 1.25; padding: 0px; position: absolute;
top: 0px; width: 100%;z-index: 0;" /><div style="padding: 20px; position: relative; z-index: 1;">menulis disini
Catatan 2
Bacground gambar dengan opacity & aspect ratio
<!-- Layer Gambar dengan Opacity -->
<div style="position: absolute; inset: 0; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTfV_tv0CrXrQmG5u3OBSejUat0zHnPOr6pp3Zwjh2yDtlV5dutmKagdTr4oCu0jEvk8of2WdGn1B2IrhmmJRyzpGWdon5FT8bFlam4ja9-bKiKSuJhed1pu5EuOa-ya2mj--wqgKjPDpDAt8uqWHiHBKKu2RX1KFLpNQ2EGrFNzH31RId_jKrcJl228/s320/Screenshot_10.jpg'); background-position: center; background-size: cover; opacity: 0.5;"></div>
<!-- Isi konten -->
<div style="position: relative; padding: 10px; box-sizing: border-box; text-align: left; scrollbar-width: none; height: auto; width: 100%;">menulis disini</div></div>
Catatan 3
Catatan 4
Baground opacity, aspect ratio dan auto scroll
<div style="
aspect-ratio: 393 / 581;
border-radius: 12px;
margin: auto;
max-width: 760px;
width: 100%;
position: relative;
overflow: hidden;
">
<!-- background -->
<div style="
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTfV_tv0CrXrQmG5u3OBSejUat0zHnPOr6pp3Zwjh2yDtlV5dutmKagdTr4oCu0jEvk8of2WdGn1B2IrhmmJRyzpGWdon5FT8bFlam4ja9-bKiKSuJhed1pu5EuOa-ya2mj--wqgKjPDpDAt8uqWHiHBKKu2RX1KFLpNQ2EGrFNzH31RId_jKrcJl228/s320/Screenshot_10.jpg');
background-position: center;
background-size: cover;
opacity: 0.5;
inset: 0;
position: absolute;
z-index: 0;
border-radius: 12px;">
</div>
<!-- konten scrollable -->
<div style="
position: relative;
z-index: 1;
height: 100%;
overflow-y: auto;
padding: 10px;
box-sizing: border-box;
color: #2c2c2c;">
<h3>Hai Nona 💕</h3>
<p>Ini isi panjang yang bisa di-scroll ke bawah...</p>
<p style="margin-top: 400px;">Sudah sampai bawah? Kamu hebat 🌸</p></div></div>
Catatan 5 🌸