Cách chỉnh sửa style.css của Altitude Pro để khắc phục sự cố tải ảnh nền

Thủ thuật WordPress
#1

Nếu bạn đã sử dụng thanh trượt có chiều rộng đầy đủ hoặc video nền trong / cho phần trang đầu 1 của Altitude Pro, bạn có thể nhận thấy hình nền cho các phần hình ảnh khác tải không chính xác hoặc một phần trong Google Chrome.

Lý do chính cho hành vi lỗi này dường như là sự kết hợp của chỉ mục z và vị trí tương đối cho các phần trang đầu trong style.css. Đây là cuộc thảo luận trên diễn đàn StudioPress về điều này.

Dưới đây là những thay đổi bạn có thể thực hiện trong style.css của Altitude Pro nếu bạn đang sử dụng video nền và / hoặc thanh trượt và nhận thấy rằng hình nền cho một hoặc nhiều phần không tải đúng cách.

Lưu ý: Tôi không thấy điểm của lề trên phủ định, đường viền trên cùng rất lớn, nền-clip hộp đệm và vị trí tương đối cho các phần của trang đầu từ 2 đến 7. Ngoài ra, các lề trên cùng âm cho và không cần thiết. Theo tôi, cách thích hợp để loại bỏ khoảng trống bên dưới hình ảnh (khi hình ảnh hiện diện) là đặt căn chỉnh dọc của nó lên trên cùng, không sử dụng lề âm..bottom-image .bottom-image img

Ở cuối bài đăng này, bạn có thể tìm thấy một liên kết để tải xuống style.css đã được sửa đổi đầy đủ, bao gồm tất cả các thay đổi bên dưới.

  1. Thay đổi
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
	border-top: 54px solid transparent;
	margin-top: -54px;
	-webkit-background-clip: padding-box;
	-moz-background-clip:    padding;
	background-clip:         padding-box;
	position: relative;
	z-index: 9;
}

đến

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
	/*border-top: 54px solid transparent;
	margin-top: -54px;
	-webkit-background-clip: padding-box;
	-moz-background-clip:    padding;
	background-clip:         padding-box;
	position: relative;*/
	z-index: 9;
}
  1. Thay đổi
.bottom-image {
	margin-bottom: -120px;
	margin-top: 100px;
}

.bottom-image img {
	margin-bottom: -10px;
}

đến

.bottom-image {
	/*margin-bottom: -120px;*/
	margin-top: 100px;
}

.bottom-image img {
	/*margin-bottom: -10px;*/
	vertical-align: top;
}
  1. Thêm điều này bên trên các truy vấn phương tiện:
.front-page-2 .flexible-widgets {
	padding-bottom: 0;
}

.front-page-2 .flexible-widgets .widget {
	margin-bottom: 0;
}
  1. Trong truy vấn phương tiện 1023px, hãy thêm
.front-page-2 .flexible-widgets.widget-full .widget {
	margin-bottom: 0;
}

gần cuối.

  1. Trong thay đổi truy vấn phương tiện 800px
.bottom-image {
	margin-top: 60px;
	margin-bottom: -80px;
}

đến

.front-page-2 .solid-section .flexible-widgets {
	padding-bottom: 0;
}

.bottom-image {
	margin-top: 60px;
	/*margin-bottom: -80px;*/
}