Hình nền không hiển thị trong Safari

Question

Tôi đang làm việc trên thiết kế đáp ứng và lớp "bgMainpage" đang có hình nền nhưng không hiển thị trên Safari trên tất cả các thiết bị. Tôi đã áp dụng bao gồm kích thước nền vì nó là những gì khách hàng muốn. Tôi cũng đã thêm CSS của trình duyệt cụ thể và tôi không chắc chắn nên làm gì để nó cũng hiển thị trong Safari nữa. Chrome, FF, IE hiển thị hình ảnh tốt. Bất kỳ ý tưởng?

Project Link

CSS:

.bgMainpage{ 
    background:url("../images/bg.jpg") no-repeat scroll right top #000000; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size:cover; 
    background-size: cover; 
} 

Answer 1

tôi chuyển đổi các định dạng hình ảnh từ jpeg để gif và nó làm việc. Vì vậy, CSS cuối cùng là:

.bgMainpage{ 
    background:url("../images/bg.gif") no-repeat scroll right top #000000; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size:cover; 
    background-size: cover; 
} 

Answer 2

có lẽ vì hình ảnh được lưu sai. Tôi đã gặp vấn đề này một lần và phải thay đổi những điều sau đây:

mở ảnh của bạn trong photoshop và lưu nó "cmyk" tùy chọn này có thể thay đổi trong chế độ xem, cấu hình-proof, cmyk-màu sắc (xin lỗi, photoshop của tôi là tất cả trong Đức)

hy vọng điều này giúp

Answer 3

Hãy thử mã này.

.bgMainpage{ 
    background:url(../images/bg.jpg) no-repeat scroll right top #000000; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size:cover; 
    background-size: cover; 

Answer 4

Safari có lỗi rõ ràng khi nó không hiển thị một số hình ảnh jpg/JPEG thuộc một loại hình nền nhất định nếu đáp ứng một số tiêu chí. Để sử dụng trực tuyến, có một loại hình ảnh jpg có tên là Progressive JPEG. Hình ảnh jpg thông thường mã hóa dữ liệu hình ảnh từ trên xuống dưới và bạn có thể thấy chúng tải theo cách đó trực tuyến. Ngược lại, JPEG tiến bộ mã hóa hình ảnh với chi tiết cao hơn dần dần. Điều này có nghĩa rằng nó tải mờ lúc đầu và sau đó được rõ ràng hơn. Một số người nghĩ rằng điều này có vẻ trực tuyến tốt hơn, đó là lý do tại sao nó được sử dụng. Một số trình tối ưu hóa hình ảnh sẽ tự động tạo các jpg tiến bộ để sử dụng trực tuyến.

Theo kinh nghiệm của tôi, Safari sẽ không hiển thị jpgs khi một số các tiêu chuẩn sau đây được đáp ứng:

• mã hóa tiên tiến được sử dụng
• hình ảnh là một nền tảng (đối với một thành phần hoặc toàn bộ trang)
• hình ảnh lớn (tôi không biết chính xác có bao lớn, nhưng tôi chạy vào vấn đề với những hình ảnh mà là trong hàng ngàn điểm ảnh rộng)
• thứ có thể khác, tôi chưa khám phá đầy đủ lỗi này

Tôi chưa thể tạo lại điều này trong bất kỳ trình duyệt nào ngoại trừ Safari.

Để khắc phục điều này, bạn có thể lưu lại hình ảnh, đảm bảo rằng hình ảnh không có định dạng tiến bộ (photoshop, v.v ...) hoặc sử dụng định dạng khác (gif, png, v.v ...)

Answer 5

tôi có cùng một vấn đề và tôi đã giải quyết được vấn đề này bằng cách thay đổi:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0/cover rgba(0, 0, 0, 0); 

tới:

background: url("images/backgroundimage.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 

và đang làm việc tốt trong safari bây giờ :)

Answer 6

Tôi gặp vấn đề tương tự. hình ảnh của tôi tiến triển và giống như JC Hulce đã trả lời, safari có một lỗi với điều đó.
Để kiểm tra xem hình ảnh của bạn có tiến bộ hay không: techslides.com/demos/progressive-test.html.
Để khắc phục chỉ mở trong photoshop và chuyển đến tệp trình đơn-> lưu cho web

Answer 7

Tôi gặp sự cố tương tự với Safari. Tôi đã thử các giải pháp khác, điều duy nhất làm việc cho tôi là để xóa chỉ mục z- âm.

Answer 8

Tôi đã gặp vấn đề tương tự và không có giải pháp nào khác ở đây khắc phục được sự cố. Đối với tôi, tôi đã có một hình nền trên một neo được bọc trong một div. Tất cả các trình duyệt đều xử lý ảnh nền tốt ngoại trừ Safari 6. Bản sửa lỗi cho tôi là đặt vị trí: tương đối trên div và vị trí: tuyệt đối trên liên kết anchor.

Answer 9

Tôi đã truy cập trang này từ trang tìm kiếm của Google, vì vậy trong trường hợp vấn đề này xuất hiện cho người khác, chỉ cần đảm bảo bạn kiểm tra kỹ mã của mình. Safari có thể rất cầu kỳ về mã đúng, vì vậy ngay cả khi nó được gõ chính xác ở đây trong câu hỏi, chỉ cần làm một kiểm tra đôi về điều đó. Nếu bạn quên dấu ngoặc đơn cuối, nó sẽ không hiển thị, nơi các trình duyệt khác như Chrome sẽ cho rằng bạn muốn đặt nó và hiển thị đúng trang. Hãy chắc chắn rằng tất cả các mã của bạn được mở ra đúng/đóng:

<div style="background-image:url('../images/bg.jpg');">HEY</div>

Answer 10

Đã vấn đề và thấy điều này, nhưng không làm việc. Cuối cùng phát hiện ra rằng URL() đã thiếu dấu ngoặc đơn đóng của nó. Ngay cả khi không có nó, hình ảnh nền hoạt động trên IE 9+, Edge, Chrome và Firefox. Chỉ Safari, trong số các trình duyệt được thử nghiệm, không hiển thị hình nền.

Đã thêm) và mọi thứ đã hoạt động.

Answer 11

Cố gắng thay đổi hoặc xóa :::

background-attachment:fixed; 

công trình của nó đối với tôi trong safari .....

Answer 12

Dường như săn không thích:

background-attachment: fixed; 

Nhưng Tôi vẫn muốn có một số thị sai, đặc biệt là trên máy tính để bàn. Vì vậy, giải pháp của tôi là xóa phần trên khỏi lớp .header đơn giản và đặt nó ở dưới:

@media(min-width: 1334px) 

Điều này có hình ảnh của tôi hiển thị trên hầu hết các iPhone qua iPad. Nó chỉ không bao gồm iPhone 6 Plus. Độ phân giải của điện thoại này đang đi vào lãnh thổ trên máy tính để bàn.

Answer 13

Tôi đã gặp sự cố tương tự nhưng tôi không kiểm soát được hình ảnh vì nó đã được sinh ra bởi tumblr nên các đề xuất tiến bộ không hoạt động.Tôi đã kiểm tra lại mã của mình và bất kỳ thứ gì khác cũng được đề xuất, cuối cùng tôi đã thử đặt MIN-HEIGHT thành div với hình nền và Safari cuối cùng cũng hiển thị nó giống như mọi trình duyệt khác. Hy vọng rằng sẽ giúp thoát khỏi một vài nhức đầu.

Answer 14

Vui lòng thử với mã sau, bạn có thể cần thay đổi chiều rộng và chiều cao cũng như url.

.gallery { 
 
    height: 190px; 
 
    width: 940px; 
 
    margin-bottom: 13px; 
 
    background-color: transparent; 
 
    background-image: url("/img/user/admin/photo.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-position: center bottom; 
 
    background-attachment: scroll; 
 
    background-size: cover; 
 
    -ms-background-size: cover; 
 
    -o-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -webkit-background-size: cover; 
 
}

Answer 15

Tôi chỉ chạy vào vấn đề này và không ai trong số các giải pháp đề xuất cố định này. Tôi đã giải quyết trường hợp của tôi về điều này và đó là do các giao thức hỗn hợp: trang web là https trong khi hình ảnh bg là http. Điều này làm cho việc tải hình ảnh thành âm thầm không thành công và không chỉ hiển thị trên Safari, trên MacOS và chỉ dành cho một số người dùng.