Helpex - Trao đổi & giúp đỡ Đăng nhập
30

tôi đã thử trong global.scss với tư cách là

ion-content{
    background-image: url('assets/images/cover.jpg');
    -webkit-background-image: url('assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
  }

nhưng điều này không hiển thị hình ảnh. cũng đã thử đường dẫn như ./assets/images/cover.jpg.

nếu tôi đặt hình ảnh giống như thẻ img trên trang hiển thị loại trừ khả năng hình ảnh không hợp lệ.

Tôi cũng đã cố gắng đưa vào homeage.scss như

.myview {
    background-image: url('../../assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

và sử dụng class = "myview" trong home.html thì không thành công

30 hữu ích 1 bình luận 35k xem chia sẻ
79

Bạn có thể sử dụng CSS-Variable - nền để thay đổi nền của nội dung ion.

Thí dụ:

ion-content{
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}

Đặt điều này vào các thành phần, trang hoặc scss toàn cầu của bạn.

Để tham khảo, hãy xem tại: https://beta.ionicframework.com/docs/api/content#css-custom-properties

79 hữu ích 5 bình luận chia sẻ
23

Tôi đã giải quyết vấn đề bằng cách làm như sau:

ion-content {
    --background: none;
    background-image: url('/assets/imgs/page_bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Điều này sẽ vô hiệu hóa nền và sau đó đặt một nền chính xác.

23 hữu ích 2 bình luận chia sẻ
6

Tôi đã gặp trường hợp tương tự, có thuộc tính css nền ion dẫn đến sự cố chập chờn trên IOS

hãy thử cách sau nếu bạn gặp sự cố chập chờn

:host {
  ion-content {
    --background:none;
    background:url(''../../assets/images/cover.jpg');
    background-size: cover;
    background-position: center center;
  }
}

cho bất kỳ ai gặp sự cố bàn phím (thay đổi kích thước nền trên màn hình bàn phím), hãy cài đặt plugin Bàn phím

https://ionicframework.com/docs/native/keyboard/

và thêm mã sau vào config.json của bạn

<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />

Lưu ý: điều này có thể ẩn mục bên dưới bàn phím khi nó được hiển thị (tôi chỉ thử nghiệm trên iOS)

6 hữu ích 0 bình luận chia sẻ
0

Tôi đã thử câu trả lời từ @rchau, nhưng nó không hoạt động trong trường hợp của tôi. Thay vào đó, tôi đặt mã này vào dự án của mình và nó đã làm đúng:

ion-content{
    --background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
0 hữu ích 4 bình luận chia sẻ
0

04-05-2019

Đây là giải pháp làm việc cho tôi.

ion-content {
    --background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css angular typescript ionic-framework ionic4 , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading