Home
thủ-thuật-blog

Cắt ảnh bằng CSS

cat anh bang css, cat anh, thu thuat blog, thu thuat
Bạn muốn tạo ra những bức ảnh đẹp và ấn tượng mà không cần những phần mềm chỉnh sửa ảnh chuyên nghiệp, bạn có thể sử dụng đoạn code sau để tạo ra những bức ảnh như vậy. 
<style>
* {margin: 0;padding: 0;white-space: nowrap;box-sizing: border-box;}
body {margin: 100px;}
div.strip {margin-right: 148px;display: inline-block;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVxybNo5h48Sbh_ze0HVMrs3dMQpAgipGXHWpZmW__yIycZZOzrUiKmBE1aPlr9MGOtkpjCpvyjaGzXS8U_UILd6n0_tefE26jiAC9QWGaBsxP7Y1v_YScmgE2PC9Zw3M_4LQU08_Efc/s1600/test.jpeg);
height: 350px;width: 64px;position: relative;background-position: 0 -20px;}
div.strip2 {background-position: -192px -20px;}
div.strip3 {background-position: -384px -20px;}
div.strip:after, div.strip:before {position: absolute;content: '';height: 350px;width: 64px;top: 20px;left: 70px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVxybNo5h48Sbh_ze0HVMrs3dMQpAgipGXHWpZmW__yIycZZOzrUiKmBE1aPlr9MGOtkpjCpvyjaGzXS8U_UILd6n0_tefE26jiAC9QWGaBsxP7Y1v_YScmgE2PC9Zw3M_4LQU08_Efc/s1600/test.jpeg);}
div.strip:before {left: 141px;top: -20px;}
div.strip1:after {background-position: -64px -40px;}
div.strip1:before {background-position: -128px 0px;}
div.strip2:after {background-position: -256px -40px;}
div.strip2:before {background-position: -320px 0px;}
div.strip3:after {background-position: -448px -40px;}
div.strip3:before {background-position: -512px 0px;}
</style>
<body>
<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
</body>
THUỘC TÍNH:
- Bạn thay background-image: url dưới thành link ảnh mà bạn muốn cắt. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVxybNo5h48Sbh_ze0HVMrs3dMQpAgipGXHWpZmW__yIycZZOzrUiKmBE1aPlr9MGOtkpjCpvyjaGzXS8U_UILd6n0_tefE26jiAC9QWGaBsxP7Y1v_YScmgE2PC9Zw3M_4LQU08_Efc/s1600/test.jpeg

#TEST CODE

Bạn có thể test code và xem kết quả TẠI ĐÂY