Amazing Canvas background effects — How to Canvas

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Fun background effects

In this tutorial, we are exploring some fun code that will help us create interesting pages in Canvas. Don’t settle for the default white background. Follow along on the demo Canvas page:

https://canvas.instructure.com/courses/2560052/pages/page-background-effects

Try this code in your Canvas course

<div style="background: url('https://images.unsplash.com/photo-1541053892672-e3e9f3947e42?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80') no-repeat center; align-items: center; display: flex; justify-content: center; height: 400px; width: 800px;">
    <div style="background-color: rgba(255, 255, 255, 0.4); padding: 20px; margin: 30px;">
        <p>Create some amazing stuff for your Canvas pages</p>
<div style="background: url('/courses/2560052/files/190295517/preview') right bottom no-repeat , url('https://images.unsplash.com/photo-1531685250784-7569952593d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80'); height: 400px; width: 600px;">
    <p style="padding: 100px;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
<div style="background-image: conic-gradient(#aa4b6b, #6b6b83, #3b8d99, #aa4b6b); height: 50vh;">
    <p style="padding: 100px; color: #ffffff;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
<div style="background-image: linear-gradient(45deg, #aa4b6b, #6b6b83, #3b8d99); height: 400px; width: 100%;">
    <p style="padding: 100px; color: #ffffff;">Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.</p>
  Please consider subscribing to our YouTube channel for more Canvas tips and tricks.  It is so easy and so free.  The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas