biến một div thành trong suốt để nhìn xuyên qua hai container

Tôi đã sau đánh dấubiến một div thành trong suốt để nhìn xuyên qua hai container

<body> 
    <div class="holder"> 
     <div class="circle"></div> 
    </div> 
</body>

và tôi đã áp dụng một nền cố định để yếu tố cơ thể và nền trắng áp dụng cho người giữ lớp

body { 
    background: url(image.png); 
    background-attachment: fixed; 
} 

.holder { 
    width: 500px; 
    height: 500px; 
    background: #fff; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: rgba(0, 0, 0, 0); 
}

những gì tôi đã cố gắng làm là làm cho vòng tròn trong suốt để xem nền cơ thể. Đơn giản, những gì tôi đang cố gắng là, làm cho vòng tròn trong suốt để xem hình nền cơ thể trong khi nền trắng xung quanh vòng tròn vẫn còn tồn tại. xin vui lòng tha thứ tiếng Anh của tôi. Các bạn hãy giúp tôi.

Nguồn

2013-06-07 The Last Coder

Những gì bạn đang yêu cầu làm sẽ không hoạt động khi sử dụng tính minh bạch.

Tuy nhiên, có một công việc xung quanh đó là khá chấp nhận được:

body { 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
} 
.holder { 
    width: 500px; 
    height: 700px; 
    background: rgba(255,255,255,0.8); 
    border: 1px dotted blue; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
}

xem demo tại: http://jsfiddle.net/audetwebdesign/FqMXz/

Chỉ cần áp dụng các hình nền cùng với .circle div.

Bí quyết này được lấy từ một trong những cuốn sách CSS của Eric Meyer.

Nguồn

2013-06-07 15:12:34

NICE ..... Cảm ơn bạn sir :) –

Bạn đang rất hoan nghênh, câu hỏi hay để hỏi! –

Các liên kết hình ảnh cần được cập nhật từ/400/500 đến/g/400/500. Fiddle mới: http://jsfiddle.net/FqMXz/85/. Mẹo cứu sinh, cảm ơn bạn. – steel

Số thứ 4 trong rgba() là độ trong suốt của alpha. Bạn đã đặt thành 0, hoàn toàn trong suốt. 1 sẽ hoàn toàn mờ đục. Bạn cần đặt giá trị đó thành một số giá trị từ 0 đến 1.

Điều đó nói rằng, nếu bạn đang cố gắng tạo hiệu ứng của lỗ, thì điều bạn cần làm là tạo hình nền màu trắng và minh bạch vòng tròn cắt trong nó và làm cho rằng nền để .holder. Việc bạn làm trong suốt .circle là không quan trọng nếu .holder hoàn toàn mờ đục!

Nguồn

2013-06-07 15:07:35

i cần phải làm cho vòng tròn hoàn toàn trong suốt để xem nền cơ thể trong khi nền trắng xung quanh vòng tròn vẫn còn tồn tại. nhưng không thể vì nền của lớp .holder. (lớp chứa của vòng tròn). chỉ làm cho vòng tròn trong suốt không làm điều đó. bạn có thể giúp tôi không? –

@solom, vâng, đọc lại đoạn thứ hai của tôi. Bạn phải sử dụng một hình ảnh trong suốt để tạo hiệu ứng này, như tôi đã mô tả nó hoặc như Marc Audet được chỉ định trong câu trả lời của anh ấy. Hoặc là giải pháp hoạt động, mặc dù công trình duy nhất của ông cho nền tảng cố định. Nhưng thật không may, không có xung quanh cần một hình ảnh. Tạo một lỗ trong nền '.holder' hoặc tạo nền trong' .circle' là bản sao cố định của nền nội dung. –

Derek đang làm một điểm tốt. Câu trả lời của tôi là cụ thể cho một nền cố định. Trong một dự án trước, tôi đã sử dụng một cách tiếp cận tương tự như Derek để tạo một mặt nạ tròn, lạ mắt cho một thư viện ảnh. Nó là tốt để hiểu cả hai kỹ thuật và khi sử dụng chúng một cách thích hợp. –

có thể bạn nên thử nó bằng cách thêm opacity: thuộc tính giá trị hoặc bằng cách thiết lập background-color của nó: rgba (0,0,0, giá trị)

Giá trị phải từ 0 đến 1.

Nguồn

2013-06-07 15:13:26 Roshan

biến một div thành trong suốt để nhìn xuyên qua hai container

Trả lời

Các vấn đề liên quan