Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp website của bạn lên hơn, đó là các thuộc tính thêm màu nền và ảnh nền cho website hoặc bất kỳ một phần tử dạng block nào. Show
Màu nền với background-colorNếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính Ảnh nền với background-imageĐối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng [codepen id=”dPBqbN”] Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị background-image: url(‘ảnh 1’), url(‘ảnh 2’); Tùy chỉnh lặp lại ảnh nền với background-repeatMặc định khi sử dụng ảnh nền, thì hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều dọc cho đến khi ảnh nền lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp ảnh nền thông qua thuộc tính
Một ví dụ của DMD về việc lặp ảnh nền. [codepen id=”yydQNK”] Đổi vị trí ảnh nền với background-positionĐối với các tấm ảnh nền cỡ nhỏ hoặc dùng background-size để sửa lại kích thước thì có thể bạn sẽ cần thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể dùng thuộc tính background-position này. Nó có một số giá trị như sau:
Đối với thuộc tính này thì bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải phía trên phần tử thì sẽ có giá trị là Ngoài ra còn có thêm một vài thuộc tính dành riêng cho việc tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé. Lời kếtMặc dù trong bài này mình không nói hết toàn bộ thuộc tính liên quan đến ảnh nền nhưng ở trên là các thuộc tính mà mình nghĩ rằng bạn sẽ cần sử dụng nhiều nhất nên bạn cứ tập trung làm quen với các thuộc tính đó trước, từ đó bạn sẽ cảm thấy bắt đầu với các thuộc tính tương tự dễ dàng hơn. Thạch PhạmBé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain". Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. Đã đăng vào thg 9 20, 2019 9:08 SA 1 phút đọc 1 phút đọc Với CSS bạn có thể tạo ra các hiệu ứng rất đẹp và thú vị khi kết hợp với HTML và JavaScript, hoặc ngay cả khi chỉ có mình nó, CSS hỗ trợ rất nhiều trong việc thiết kế giao diện. Bạn sẽ ngạc nhiên về những gì các nhà phát triển có thể tạo ra. Từ các hình ảnh động cuộn đơn giản đến các background phức tạp được xây dựng hoàn toàn bằng CSS, những hiệu ứng này có thể làm trang web của bạn trơ nên lung linh và sáng tạo hơn. Hôm nay tôi đã thu thập được 14 CSS rất tuyệt vời. Parallax Pixel StarsGradient Background AnimationFrosted Glass EffectShooting StarTri TravelersColorDropsAnimated Background HeaderZero Element: DeLightGlowing Particle AnimationBackground Image Scroll EffectMultiple Background Image ParallaxBokeh EffectCalm Breeze Login ScreenEffect Text GradientCảm ơn các bạn đã đọc ! Hi vọng sẽ giúp bạn trong công việc Tham khảo: 1stwebdesign All rights reserved |